position属性与z-index属性详解，如何比较z-index值确定覆盖关系，为何z-index属性不生效。

目录

position属性含义

absolute

relative

fixed

z-index含义

比较规则

注意

---

position属性含义

static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

absolute

设置后处在原本出生位置，定位是相对设置了absolute、relative或fixed的上级元素进行定位，当所有的父级都无这些属性时，相对整个页面设置，不是相对body，因为body4面都有8px的外边距。原先在文档中的占位会释放，对后续文档会有影响。

relative

设置后处在原本出生位置，定位是相对原来的位置进行定位。原先在文档中的不会释放，对后续文档无影响。所以常在父集元素中用relative，子集元素用absolute进行相对定位。

fixed

设置后处在原本出生位置，定位是相对整个页面进行定位。原先在文档中的占位会释放，对后续文档会有影响。

sticky

基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

z-index含义

z-index（决定覆盖关系，为整数，可负）：因为设置了absolute、relative、fixed后会脱离文档流，而脱离了文档流后，会有覆盖关系，未脱离文档流之前会像输入文字一样，是不会重叠的，所以只有对设置了absolute、relative、fixed的元素生效，设置值后z-index属性默认为0（虽然浮动流也会脱离文档流，但设置z-index值是不会生效的）

比较规则

1.不同大小，值大的覆盖小，相同大小，以出生先后决定覆盖关系，后面出生的覆盖前面的。

2.只有相同父集的才能直接比较（即兄弟节点之间能比较），例如下图中b和B才能直接比较。

3.不同的父集时，需将2元素都转换为兄弟节点才能进行比较（即取他们的父集的z-index值进行比较，如果没有直接设置z-index，则用子孙的，并可以依次往下取，都没有才默认为0）。例如下图，我们比较C和d的z-index值时，先转化为相同父集的兄弟元素即B和b比较，b取自身的z-index值，如果没有就取c的，再没有才取d的，都没有则默认为0，B也同样。

4.z-index>=0的元素会覆盖浮动流（设置了float：left/right，这些元素也会脱离文档流，且是覆盖在文档流上面的）和文档流的元素，即只设置了absolute、relative、fixed的元素会覆盖文本或浮动元素，而当再设置z-index=负数时，会被文档流的元素覆盖（我们可以把文档流和浮动流的元素z-index分别当做等于-0.5和-0.25）。

<div class="a">
		<div class="b">
			<div class="c">
				<div class="d"></div>
			</div>
		</div>
		<div class="B">
			<div class="C"></div>
		</div>
</div>

注意

设置了position：absolute、relative、fixed不会改变元素display类型，而设置了float：left/right会将元素转换为inline-block元素，可以通过是否覆盖文字来验证，设置了position的会覆盖文字，而float不会，因为带有inline属性的都不会覆盖文字。