CSS:z-index属性

发布时间 2023-06-30 21:32:38作者: MARSHBAN

如果父 div 元素设置了 z-index: 100 属性,
子 div 元素的行为将取决于其自身的 z-index 值和定位方式。

子 div 元素没有显式设置 z-index:

如果子 div 元素没有设置 position 属性,或者设置为 static,则子元素的层叠顺序将继承自父元素,并且父元素的 z-index 值(100)将影响子元素。
如果子 div 元素设置了其他定位方式(如 relative、absolute、fixed),则子元素的层叠顺序将相对于同级元素进行决定,而不受父元素的 z-index 影响。

子 div 元素显式设置了 z-index:

如果子 div 元素设置了比父元素更高的 z-index 值,则子元素将覆盖在父元素之上,无论父元素的 z-index 值如何。
如果子 div 元素设置了比父元素较低或相同的 z-index 值,则会根据它们在 DOM 中的位置决定层叠顺序。
总结:父 div 设置 z-index: 100 会影响子 div 元素的层叠顺序,但最终的层叠顺序还会受到子元素自身的 z-index 和定位方式的影响。如果子元素没有显式设置 z-index,则父元素的 z-index 值将起作用。