gpt4 book ai didi

html - Z-index 不适用于将父 DIV 与其中的 DIV 重叠

转载 作者:搜寻专家 更新时间:2023-10-31 08:17:03 25 4
gpt4 key购买 nike

我想做的是隐藏 DIV 的滚动条。为此,我使用 overflow-y: hidden; 创建了一个外部 DIV,并在其中放置了一个稍宽的 DIV。我给外部 DIV 设置的 z-index 比内部的高。两者都有 position: fixed;,但无论如何,它不起作用——较宽的 DIV 在其父 DIV 之外仍然可见。我还做了这样 htmlz-index 会高于内部 DIV,希望它能隐藏滚动条,但这也不起作用.使用负 z-index 也没有用。我已经搜索了几天来解决这个问题,但没有一个奏效。

这是基本示例代码(我应该在 jsfiddle 中包含整个代码吗?)- HTML:

<html>
<body bgcolor="#BFBFBF">
<div class="outer_MB">
<div class="in_MB">
</div>
</div>
</body>
</html>

CSS:

html {
z-index: 2;
}

.outer_MB {
position: fixed;
height: 70%;
width: 84%;
left: 8%;
bottom: 0;
border-left: 1px solid black;
border-right: 1px solid black;
overflow-y: hidden;
z-index: 2;
text-align: center;
}

.in_MB {
height: 70%;
width: 86%;
position: fixed;
overflow-y: scroll;
z-index: 1;
}

PM:这是我在这个网站上提出的第一个问题,如果我遗漏了什么请告诉我,我会尽力修复它。

最佳答案

问题是您的 .in_MB 元素绑定(bind)到 outer_MB 元素。无论您的内部元素的 z-index 设置为什么,它都将始终显示在外部元素的顶部。

想象一下有两个盒子。一个大盒子和一个小盒子。你把小盒子放在大盒子里面。然后,您将大箱子抬起 - 小箱子不会停留在原处,而是与大箱子一起抬起。

如果你想让 .in_MB 出现在 .outer_MB 后面,你需要让它们成为独立的元素:

<div class="outer_MB"></div>
<div class="in_MB"></div>

然后您需要设置 .in_MB 元素的样式,使其出现在与 .outer_MB 元素相同的位置。由于这些元素现在是独立的但共享相同的整体祖先,因此 z-index 将相应地开始行动。

关于html - Z-index 不适用于将父 DIV 与其中的 DIV 重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31315475/

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