首先，我们应了解position的默认值——static
static
默认值，没有定位，元素出现在正常的流中，即忽略 top, bottom, left, right 或者 z-index 声明
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
特征：脱离正常流
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
特征：脱离正常流
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left: 20" 会向元素的 left 位置添加 20 像素。
特征：不会脱离正常流
absolute与fixed
| 共同点 |
1、都会改变行内元素（inline）的呈现方式，display会被设置为block 2、都会让元素脱离正常流，不占据空间 3、默认都会覆盖在非定位元素之上，也可通过z-index声明调整覆盖顺序 |
| 不同点 |
1、absolute的根元素是可以设置的；而fixed的根元素固定为当前窗口（应用） 2、（常用）当你滚动时，fixed元素与窗口（应用）之间的距离是不变的 |
absolute与relative
| 不同点 |
1、absolute参照的是父级元素的左上角；relative参照元素的原始点（比如，"left: 20" 会向元素的 left 位置添加 20 像素） 2、relative的z-index不能定义父子的上下关系，一定是子上父下；absolute多个层可以使用z-index属性改变层重叠顺序 |
原文地址：https://www.cnblogs.com/hoanfir/p/9278129.html
时间： 2024-08-30 07:35:55