Z 索引不适用于将父 DIV 与其内部的 DIV 重叠

我想做的是隐藏div的滚动条。为了做到这一点，我用overflow-y: hidden;创建了一个外部div，并在其中放置了一个稍宽的div。我给了外层DIV比内层DIV高的z-index。两者都有position: fixed;，但不管怎样，它都不起作用——更宽的DIV在其父DIV之外仍然可见。我还让html的z-index高于内部DIV，希望它能隐藏滚动条，但这也不起作用。使用阴性z-index也不起作用。我已经找了好几天了，但都没有成功。

以下是基本的示例代码(我应该将整个代码包含在jsfidd中吗？(-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元素绑定到outer_MB元素。无论内部元素的z-index设置为什么，它都将始终显示在外部元素的顶部。

想象一下有两个盒子。一个大盒子和一个小盒子。你把小盒子放在大盒子里。然后你把大盒子举起来——小盒子不会停留在原地，它会和大盒子一起举起来。

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

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

然后，您需要对.in_MB元素设置样式，使其显示在与.outer_MB元素相同的位置。由于这些元素现在是分离的，但共享相同的整体祖先，因此z-index将相应地开始工作。

所以问题的要点是您需要一个允许滚动的div，但滚动条不应该是可见的。。。

看看这把小提琴。

这是片段。

#container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#content {
  width: 100%;
  height: 99%;
  overflow: auto;
  padding-right: 15px;
}
html,
body {
  height: 99%;
  overflow: hidden;
}

<div id="container">
  <div id="content">
    testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />
  </div>
</div>

希望能有所帮助。。

相关内容

最新更新

热门标签：