前端布局遇见的坑之——z-index

最新推荐文章于 2023-03-30 17:03:35 发布

转载最新推荐文章于 2023-03-30 17:03:35 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hess/p/10248884.html

本文分享了一次项目测试中遇到的奇怪现象：导航DOM已渲染却未显示数据，最终发现是z-index设置不当所致。文章详细解析了z-index的两个关键注意事项，并提供了正确的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　项目测试中遇见一个有趣的问题，导航DOM已经成功渲染到页面，也没有隐藏元素，但就是不显示数据。以为是js逻辑出了问题，但是咋看都没问题，百思不得其解。心想在这科学的时代，怎么会有这么诡异的事情，越想头越大。不敢深思，赶紧把已经飞到几千里外的思绪给拉回来。把注意力放到css上一探究竟。F12查看元素，发现写的样式里用到了z-index,那就肯定是它在做鬼了，细看html结构发现原本应该在父元素身上的z-index竟然被子元素给抢跑了，于是把z-index重新还给父元素（说的好轻松，实际可是花了我整整两小时）。

　　下面就说说使用z-index需要注意的地方：

　　一、使用z-index时，必须同时使用position属性，而且属性值必须是relative、absolute、fixed。

　　二、z-index是根据父元素的z-index值决定的，子元素给再大卵用都没有。

　　说的有点简单，比较详细的看这位css z-index详解。

转载于:https://www.cnblogs.com/hess/p/10248884.html