gpt4 book ai didi

html - Z-index 不适用于父项中的子项

转载 作者:行者123 更新时间:2023-11-28 07:58:38 24 4
gpt4 key购买 nike

我知道有很多关于 z-index 的问题,但我仔细查看了它们,仍然没有发现我在这里遗漏了什么。它必须是简单的东西,我只是忽略了。我已经对其他元素进行了 z-index 处理。有人在这里帮助我:

.parent {
width: 100%;
position: relative;
background: red;
display: inline-block;
}
.bottom1,
.bottom2 {
width: 40%;
position: relative;
z-index: 1;
background: yellow;
}
.bottom2 {
float: right;
}
.top {
width: 60%;
position: relative;
z-index: 5;
margin: 0 auto;
background: blue;
}
<body>

<div class="parent">
<div class="bottom1">hello</div>
<div class="top">again</div>
<div class="bottom2">bye</div>
</div>

</body>

我这里有 JSfiddle http://jsfiddle.net/slabicht2/drj0qLt2/

谢谢

最佳答案

问题不在于您的 z-index,而在于您的定位。

如果我理解正确的话,您希望您的元素具有绝对定位并位于“顶部”div 之下。

编辑:FIDDLE

将您的 CSS 更改为

.bottom1, .bottom2 {
width: 40%;
position: absolute;
z-index: 1;
background: yellow;
height: 50px;
}

.bottom2 {
right: 0;
top: 0;
}

关于html - Z-index 不适用于父项中的子项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29949292/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com