logo标签列表

Z-index在父DIV和子DIV重叠时无效。

htmlcssz-indexjscrollbar
4
我试图隐藏DIV的滚动条。为了做到这一点，我创建了一个外部DIV，并在其中放置一个略微宽一些的DIV，并设置overflow-y: hidden;属性。我为外部DIV赋予更高的z-index值，以比内部DIV更高。
两个DIV都具有position: fixed;属性，但无论如何都不起作用-较宽的DIV仍然可见于其父DIV之外。
我还使html的z-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（项目经理）：这是我在这个网站上提出的第一个问题，如果我漏掉了什么，请告诉我，我会尽力解决。

2个回答
3
问题在于你的 .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将相应地启动。

我简直不敢相信我以前没有想到过！谢谢，它起作用了。 - The Light Sabrix
1
所以你的问题是需要一个允许滚动但不显示滚动条的 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>

希望它有所帮助...
这种方法的问题在于不同的浏览器有不同大小的滚动条。在Windows上的Chrome中，我可以看到一个模糊的线条，因为在我使用的浏览器中，滚动条宽度为17px - 大于您定义的15px。此外，一些浏览器将具有更细的滚动条或更糟糕的是，滚动条会出现在内容之上（平板电脑等），因此这种解决方案可能会引起更多问题。 - James Donnelly
1
谢谢@JamesDonnelly!! 我现在可以看到问题了。我在3个浏览器上进行了测试，火狐浏览器显示一个细小的滚动条移动..感谢你指出来。 :) - Shrinivas Shukla
我已经想到了。问题是，我的DIV只有大约84%的宽度。我使用了类似的方法，但内部DIV仍然可见于主体内部。那种方法是隐藏整个页面的滚动条，而不是小的DIV。至少我是这么认为的。可以让我的内部DIV更宽，并增加大量填充，但那会有点太狡猾了。 - The Light Sabrix
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接