记一下关于z-index的条件

最新推荐文章于 2024-05-31 19:50:46 发布

AlexZhang66

最新推荐文章于 2024-05-31 19:50:46 发布

阅读量932

点赞数

分类专栏：日常技术记录文章标签： css

本文链接：https://blog.csdn.net/AlexZhang66/article/details/107349265

版权

日常技术记录专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在制作B站仿站过程中，解决两个DIV元素无法正确重叠的问题。原文详细阐述了在使用position:relative时，z-index不会立即生效，直到元素位置发生改变。改用position:absolute后，可以通过z-index调整元素覆盖顺序。

摘要由CSDN通过智能技术生成

技术记录

今天在做B站仿站的时候遇到了一个问题：
1.需要的两个DIV没办法重叠
2.使用Z-index 将两个DIV分层显示无效父元素和子元素均有position

解决

原来是两个子元素使用的是position:relative
而在relative上使用z-index，当使用relative本身没有位移至重叠位置前，是不会通过z-index来决定覆盖情况的
如果换成position:absolute 同一页面下参照父元素的相对定位后来者会覆盖前者位置，此时可以用z-index决定覆盖状态