浅说position定位及z-index使用(才疏学浅,请多指教)
1、Z-index的运用是需要条件的,与其相关的属性就是position属性,使用前提 z-index只能在position属性值为relative或absolute或fixed的元素上有效。
Z-index:
值 | 描述 |
---|---|
auto | 默认。和文档流一个层级,不产生堆叠上下文。 |
number | 设置元素的堆叠顺序。 |
inherit | 规定应该从父元素继承 z-index 属性的值。 |
2、基本原理 z-index值可以控制定位元素在垂直于显示屏方向(Z 轴)上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。
3、同级元素的z-index值如果相同,则堆叠顺序由元素在文档中的先后位置决定,后出现的会在上面,所谓后来者居上原则。
4、同级元素的z-index值如果不相同,谁大谁上原则。
5、如果定位元素z-index发生嵌套(父子关系处理):
(1)、如果父元素z-index有效(已定位并且设置的z-index的值不是默认值auto),和父亲相比,子元素无论是否设置z-index都和父元素一致,并会显示在父元素上方,尽管子元素设置z-index比父元素小,但是子元素仍然出现在父元素上方(此谓长江后浪推前浪);和兄弟级别元素相比用自己的z-index,和兄弟元素之外的元素比用父亲的z-index去比(就是说只要父元素z-index有效的话,这个div的Z-index就只能和兄弟元素比较,除兄弟元素外的都要用父元素的Z-index去比);
(2)、否则如果父元素z-index失效(未定位或者使用默认值auto),那么定位子元素的z-index设置生效,
所以如果当你发现一个z-index值较大的元素被值较小的元素遮挡了,请先检查它们之间的结点关系,多半是因为其父结点含影响了子节点的z-index。
还有一点需要注意,负值的z-index也依照大小比较的原理,但一般来说负值的z-index会被透明的body覆盖导致点击等事件响应出现问题,请谨慎使用。
总结下来就是
-
同一层叠上下文(上下文可以理解为当前环境)中,层叠级别大的显示在上,层叠级别小的显示在下,相同层叠级别时,遵循后来居上的原则,即其在HTML文档中的顺序。
-
不同层叠上下文中,元素呈现顺序以父级层叠上下文的层叠级别来决定呈现的先后顺序,与自身的层叠级别无关。