1、父级不定位或者父级相对定位,子级绝对定位
(1)如果子级中只出现了“position:absolute;”,没有写top和left,那么你只是给子级抬高了层级,但是子级不会有任何的定位特性。
(2)如果子级中出现了“position:absolute;top:0;”,没有写left,那么子级的有一定的定位特性,在没有设置z-index的情况下,子级的层级抬高了,但它只具有top定位属性,不具备left定位属性。同理,如果没有写top,在没有设置z-index的情况下,子级的层级抬高了,但子级只具有left定位属性,不具备top定位属性。
(3)如果子级中出现了“position:absolute;top:0;left:0;”,这样的子级才完整的具备了定位特性,在没有设置z-index的情况下,子级的层级抬高了,它也同时具备了top属性和left属性。
2、父级相对定位,子级绝对定位,子级具备定位特性,设置z-index的不同情况
(1)父级不设置z-index,子级不设置z-index
在子父级都不设置z-index的情况下,子级的层级比父级的层级高
(2)父级设置z-index
在父级设置z-index的情况下,无论子级设不设置z-index,子级的层级都会在父级z-index的影响下抬高,子级会始终处于父级层级的上方,也就是子级的层级比父级的层级高
(3)父级不设置z-index,子级设置z-index
在只有子级设置z-index的情况下,如果子级的z-index大于0,子级的层级大于f父级的层级;如果子级的z-index小于0,那么子级的层级小于父级的层级,子级就会处于父级的后方。
————————————————
版权声明:本文为博主「千珑」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。