CSS 基础 3 - 定位 Postion 属性

合集 - CSS 基础(5)

1.CSS 基础 1 - Block & Inline2023-09-272.CSS 基础 2 - Box Model 盒模型2023-09-27

3.CSS 基础 3 - 定位 Postion 属性2023-09-28

4.CSS 基础 4 - CSS 常用单位2023-09-285.CSS 基础 5 - CSS 选择器2023-10-06

收起

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