什么是 z-index?
在 CSS 中,z-index 属性用于控制元素在层叠上下文(stacking context)中的显示顺序,也就是所谓的“层次”或“叠层次序”。
当多个元素重叠在一起时,z-index 属性会决定哪个元素位于上方,哪个元素位于下方。z-index 取值越大的元素,就越可能出现在上方。
什么是层叠上下文?
层叠上下文是一种 HTML 元素渲染顺序的方法,并且这种顺序是可以被修改的。当一个元素成为一个层叠上下文的根元素之后,它的所有子元素都位于这个上下文中,并且它们的层叠关系也就以这个根元素为准了。
对于非定位元素(static),它们的 z-index 不会影响层叠上下文。只有创建了新的层叠上下文的元素,才会影响其他元素的 z-index。
比较常见的创建层叠上下文的如下:
- position: absolute/fixed/relative(z-index 属性只对定位元素有效)
- opacity 属性小于 1 的元素(opacity 属性小于 1 会创建新的层叠上下文)
- iframe 元素
- z-index 值不为 auto 的 flex 元素
- transform 属性非 none 的元素
- mix-blend-mode 属性非 normal 的元素
- filter 属性非 none 的元素
- perspective 属性不为 none 的元素
- isolation 属性为 isolate 的元素
- position: sticky 的元素
z-index 叠层问题
由于创建层叠上下文的元素会对层叠顺序产生影响,导致 z-index 叠层问题时常出现:
-- -------------------- ---- ------- ---- ---------------- ---- ------------------- ---- ------------------ ------ -------- - --------- --------- - ----- - --------- --------- ---- -- ----- -- ------ ------ ------- ------ ----------------- ----- - ---- - --------- --------- ---- ------ ----- ------ ------ ------ ------- ------ ----------------- ---- -------- -- -
以上的代码中,我们将一个蓝色块和一个红色块都放在了一个相对定位的父元素中。由于 red
元素的 z-index 更高,所以看起来它应该出现在蓝色元素的上方。然而,由于 blue
元素也创建了层叠上下文,它就拥有了一个默认的 z-index 值(也就是 0),所以在这种情况下,蓝色元素依然出现在了红色元素的上方。
解决问题
为了解决这个问题,我们需要在 CSS 中重置重要属性的默认值,以使所有元素在 z-index 层叠时都具有一致的基准点。这就是 CSS Reset。
经过 CSS Reset 处理后,全部 HTML 元素的默认属性将被统一重置,而不需要担心浏览器之间的差异和变化。以下是一个 CSS Reset 基础代码示例:
-- -------------------- ---- ------- -- ----- --- ---- -------- -- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- ----- -------- ----- ------------ ------- ----------- ------- ---------- ----- ------------ -------- --------------- --------- ------ -------- ----------- ------------ -
通过在 CSS 中使用一个彻底的 Reset 来将浏览器默认样式和目标样式之间的数值差距置于一致的基础上,就能快速解决层叠问题。
结论
层叠问题对于设计自然、不受限制的页面布局来说非常棘手。所以学习如何使用 CSS Reset 解决 z-index 层次问题是非常有价值的前端技能。通过这篇文章提供的详细指导,我们相信您已经掌握了如何正确地处理这种情况。
希望您在今后的前端工作中能够使用到这些技术,为您的页面添加强大的层叠化设计效果。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/66f93906c5c563ced5c3dbc9