Question

我要做的是隐藏DIV的滚动条。为了做到这一点，我创建了一个带有overflow-y: hidden;的外部DIV，并在其中放置了稍宽的DIV。我把外部DIV比内部DIV更高z-index。两者都有position: fixed;，但无论如何，它都不起作用 - 更宽的DIV在其父DIV之外仍然可见。我也这样做z-index html z-index高于内部DIV，希望它会隐藏滚动条，但这也不起作用。也没有使用否定的<html> <body bgcolor="#BFBFBF"> <div class="outer_MB"> <div class="in_MB"> </div> </div> </body> </html>工作。我已经搜索了几天来解决这个问题但没有工作。

这是基本的示例代码（我应该在 jsfiddle 中包含整个代码吗？） - HTML：

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;
}

CSS：

login.php

PM：这是我在这个网站上提出的第一个问题，所以告诉我，如果我遗漏了一些东西，我会尝试修复它。

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重叠在一起

2 个答案: