Z-index 不适用于将父对象 DIV 与其内部重叠

Question

我想做的是隐藏 DIV 的滚动条。为了做到这一点，我用 overflow-y: hidden; 创建了一个外部 DIV 并在其中放置了一个稍宽的 DIV 。我给外面的 DIV 比里面的 z-index 高。两者都有 position: fixed;，但无论如何，它不起作用 – 更宽的 DIV 在其父 DIV 之外仍然可见。我还做到了 html 的 z-index 比内部 DIV 的更高，希望它能隐藏滚动条，但这也不起作用。使用否定 z-index 也不起作用。我已经搜索了几天来解决这个问题，但 none 成功了。

这是基本的示例代码（我应该将整个代码包含在 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;
}

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

Answer 1

问题是您的 .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 将相应地开始行动。

Answer 2

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

看到这个fiddle。

这是片段。

#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>

希望对您有所帮助..

Z-index 不适用于将父对象 DIV 与其内部重叠

Z-index doesn't work with overlapping a parent DIV with one inside it

html

css

z-index

jscrollbar