css学习笔记之position属性

static（静态定位/常规定位/自然定位）：

作用：

    使元素定位于常规/自然流中（快、行垂直排列下去，行内水平从左到右）

特点：

1.忽略top、bottom、left、right、z-index声明

2.两个相邻元素设置外边距，最终外边距=两者中的外边距最大值

3.具有固定width和height值的元素，如果把左右外边距设为auto，则这个元素水平居中

---

relative（相对定位）：

作用：

    使元素成为containing-block，可定位的祖先元素

特点：

1.可以使用top、bottom、left、right、z-index进行相对定位（相对原来自己的位置）

2.相对定位的元素不会离开常规流（常规流还留有该元素原来的位置）

3.任何元素都可以设置为relative，它的绝对定位的后代都可以相对于它进行绝对定位

4.可以使浮动元素发生偏移，并控制它们的堆叠顺序

---

absolute（绝对定位）：

作用：

    使元素脱离常规流

特点：

1.脱离常规流

2.设置尺寸为百分比时比的是最近定位祖先元素

3.left、right、top、bottom如果设置为0，它将对齐到最近定位祖先元素的各边（可用来设置居中）

4.left、right、top、bottom如果设置为auto，它将会被打回原形

5.如果没有最近祖先元素，会认做爹

6.z-index可控制堆叠顺序

---

fixed（固定定位）：

作用：

    使元素脱离常规流

特点：

1.跟absolute差不多，区别是fixed是相对于视口做定位

2.固定元素不会随着窗口滚动而滚动

3.继承absolute特点

---

sticky（磁贴定位/粘性定位/吸附定位）：

作用：

    relative+fixed的完美结合，制造出吸附效果

特点：

1.如果产生偏移，原位置还在常规流中

2.如果它的最近祖先元素有滚动，那么它的偏移标尺就是最近祖先元素

3.如果它的最近祖先元素没有滚动，那么它的偏移标尺就是视口