Z-index无效元素仍被遮挡解决办法

最新推荐文章于 2024-03-16 15:35:46 发布

宇宙无敌最坚固铁桶僵尸

最新推荐文章于 2024-03-16 15:35:46 发布

阅读量3k

点赞数 2

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/coderDouble/article/details/129882009

版权

当元素的z-index值很高但仍然被遮挡时，问题可能出在元素的position属性上。非static定位（relative,absolute,fixed）的元素才会产生层级关系，此时z-index才生效。若元素的父元素未设置z-index，则无法确定层级顺序，导致层级问题。

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

问题：

虽然元素设置的 z-index 值很大，但仍会被其他元素遮挡。

解决方式：

在元素添加position属性如果是static（等同于没有设置 position，因为 static 就是默认值）反之，如果 position 值是 relative, absolute, fixed 元素则会产生层级关系，使用z-index可以改变在父元素中设置了position值的子元素的层级。

元素z-index属性无效化，原因在于自己的父元素，和其他元素的父元素，虽然都在爷元素中开启了定位，但是某个父元素并未设置z-index值，无法进行层级比对谁高谁低。