时间戳

首页 > 解决方案 > 嵌套 div 的 z-index

css - 嵌套 div 的 z-index

问题描述

我希望得到这个结果：
https://ibb.co/htJD6J
在我的样式中，我设置了相对父位置；z-index 50。对于孩子，我设置了绝对位置；z-index 25。但结果，我得到了这个。
https://ibb.co/cwhjDy
PS对不起，没有足够的声誉来发布图片。所以，我不明白为什么 z-index 不能正常工作。有人可以帮我吗？

添加代码：父级

.sel_project_block {
 background-color: #f5876e;
 border-radius: 14px;
 margin-right: 150px;
 width: 239px;
 height: 34px;
 display: flex;
 justify-content: flex-end;
 align-items: center;
 position: relative;
 box-shadow: 1px 3px 7px #000;
 z-index: 5;
}

孩子

.additional {
 max-width: 185px;
 position: absolute;
 top: 76.2%;
 right: 22.05%;
 z-index: 1;
 color: #67573e;
 background-color: #fff;
 border: 1px solid #978d7e;
 font-size: 16px;
 width: 185px;
}

标签： csspugscss-lint

解决方案

设置position: anything-that-is-not-static建立一个新的堆叠上下文。

子元素的位置相对于父元素（即position: relative）。

所以如果你想让它出现在父元素的后面，你必须给它一个负数 z-index。

推荐阅读