CSS 基础 3 - 定位 Postion 属性

发布时间 2023-09-28 20:53:18作者: Zijian/TENG

CSS 基础 3 - 定位 Postion 属性

static

  • position 属性的默认值,元素随 HTML 流移动
  • top/left/right/bottom 属性无效

relative

和 static 类似,元素随 HTML 流移动。区别:

  • 比 static 多了 top/left/right/bottom(设定偏移量)
  • 【父相子绝】【可以作为父元素,让内部的 absolute 元素根据 relative 的位置去定位

absolute

  • 相对父元素(不能是 static,一般是 relative)的位置,通过 top/left/right/bottom 指定
  • absolute 元素完全无视 static(父元素)
  • 不随 HTML 流移动,但会随滚动条滚动

fixed

和 absolute 类似,区别:

  • fixed 不随页面滚动,常用于弹窗小广告
  • fixed 元素一旦设定了 top/left/right/bottom,则只相对 body 来定位,即使父元素是 relative 也不再相对 relative 父元素来定位!

sticky

类似于 static,随 HTML 流移动,但

  • top:0,一旦 top 与上方距离为 0,则触发 sticky,不再滚动。常用于导航栏

Reference

https://www.bilibili.com/video/BV1iE411W7ug