CSS中position属性(定位)的特点解析

CSS position属性

---

position属性之static

作用：
使元素定位于常规/自然流中
特点：
（1）left、top、right、bottom属性和z-index属性不生效
（2）如果两个相邻的元素都设置了margin，两者中最大的才会生效
（3）如果元素具有固定的宽度和高度，那么把左右边距设置为auto即可达到水平居中的效果。

position属性之relative

---

作用：
使元素成为可定位的祖先元素（绝对定位的基准 ）
特点：
（1）left、top、right、bottom属性和z-index属性可以生效。
（2）使用了相对定位，元素不会离开常规流。像下图这样。

（3）它的使用了绝对定位的后代元素都是以它作为偏移的基准

position属性之absolute

---

作用：
使元素脱离常规流（起到定位的作用）
特点：
（1）脱离常规流。如下图：

（2）以设置了relative属性的祖先元素作为定位的基准。
（3）left、right、top、bottom设置为0，margin设置为auto的时候可以实现水平垂直居中。

position属性之fixed

---

作用：
使元素脱离常规流（起到定位的作用，相对于浏览器窗口做定位）
特点：
（1）脱离常规流。
（2）相对于浏览器窗口做定位。

position属性之sticky

---

作用：
制作出吸附的效果
特点：
（1）不脱离常规流
（2）跟fixed一样相对于浏览器窗口定位，但因为不脱离常规流，所以不能超过父元素的范围，
不能大于（大于离不开父元素）也不能小于（小于没有位置放）。

一般来说，绝对定位（absolute）都会结合相对定位（relative）来使用。
那如果没有父元素设置了相对定位的话，就会根据body标签来进行定位。

下图中黄色的元素（黄色是绿色的父元素）没有设置position:relative属性。所以会根据body标签来定位。（红色边框是body的边界）

而只要给a标签（黄色的元素）加上position:relative属性就会变成这个样子。

绿色元素的偏移量(就是top、left属性的值)跟第一幅图是一样的。