CSS position 属性的四个取值和用法

属性值

1. static（默认）

   元素处于正常流中，不受 position（top, bottom, left, right）、z-index 或浮动属性的影响。
   元素占据其在正常流中的位置，并且不会与其他元素重叠。

2. relative

   元素仍然处于正常流中，但可以通过 top、right、bottom 和 left 属性相对于其正常位置进行定位。
   定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在，可通过z-index进行层次分级。

3. absolute

   元素从正常流中脱离，并相对于其最近的已定位祖先元素（如果存在）或窗口视口（如果没有已定位祖先元素）进行定位。
   定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在，可通过z-index进行层次分级。

4. fixed

   元素从正常流中脱离，并相对于窗口视口进行定位。
   元素始终保持在视口中的相同位置，即使滚动页面也是如此，可通过z-index进行层次分级。

用法和区别

**static：**用于希望元素处于其在正常流中的默认位置的情况。
**relative：**用于希望元素相对于其正常位置进行少量偏移的情况。
**absolute：**用于希望元素脱离文档流并相对于其已定位祖先元素或视口进行精确定位的情况。
**fixed：**用于希望元素始终保持在视口中的相同位置的情况，即使滚动页面也是如此。

z-index属性

z-index，又称为对象的层叠顺序，用于规定一个元素在页面上相对于其他元素的堆叠顺序（即哪个元素应当被放置在上层，哪个元素应当放置在下层）。z-index 仅对定位元素（即，具有 position 属性值为 relative、absolute、fixed 或 sticky）有效。当元素重叠时，具有较高 z-index 值的元素将覆盖较低 z-index 值的元素。

元素覆盖关系如下：
1.子级在上父级在下；
2.同级元素根据z-index定义的整数值大小，数值大在上，数值小在下；
3.同级元素且z-index值相同，则根据元素在html文档中流的顺序，先写的会被后写的覆盖。