浏览器滚动条在我的固定div下
我有一个100%宽度的固定标题.
#header {
background: #2e2e2e;
width: 100%;
z-index: 999;
position: fixed;
}
浏览器滚动条在我的固定div下.如何解决？
Nul*_*teя 38
因为overflow-x: hidden;在base.css中的行号为9
body {
color: #444444;
font: 13px/20px Arial,Helvetica,sans-serif;
overflow-x: hidden; // remove this
}
- 我不明白这个问题的解决方案是什么？似乎开始这个线程的OP从未说出他的解决方案是什么.我看到z-index:-1修复了它,但这不是我可以使用的解决方案.有没有其他方法来解决这个问题？ (10认同)
- 如果我设置z-index:-1,问题就解决了.但也许有另一种方式？ (3认同)
- 非常感谢,它有所帮助!还必须删除overflow:auto; 从身体.感谢您的时间! (3认同)
- 同样的问题，无法删除溢出......解决方案？我们应该能够将滚动条 z-index 设置为无限或其他 (2认同)
这可以通过添加身体溢出来解决
从
overflow:auto;
至
overflow:auto;
overflow:initial;
如果滚动设置在正文上,如果其结构为body> wrapper> header(具有固定位置),则内容如此
以下是您的解决方案
注意:这只适用于主体,但不适用于带滚动的div容器.您也可以使用z-index使其工作,但您将指定z-index来堆叠其他元素以使其正确.
希望这可以帮助..:)
- 您不能两次添加具有不同值的相同属性.第一个将被第二个覆盖,它也没有为我解决问题. (10认同)
Clip-path属性可以帮助你。
您需要将标题放在可滚动内容中，但这并不重要，因为它具有固定位置。然后，如果您应用于clip-path: inset(0 0 0 0);容器，它将剪掉该矩形之外的所有内容。
function toggle() {
content.classList.toggle('clip');
}#container {
overflow-y: auto;
width: 300px;
height: 100px;
padding: 0;
}
#fixed {
position: fixed;
left: 0;
top: 0;
width: 350px;
height: 50px;
background: blue;
}
#content {
height: 1000px;
width: 100%;
background: yellow;
}
#content.clip {
clip-path: inset(0 0 0 0);
}<div id="container">
<div id="content">
<div id="fixed"></div>
</div>
</div>
<button onclick="toggle()">toggle clip-path</button>- 衷心感谢您对这个神秘的黑魔法“剪辑路径”的调用。当所有其他建议都不起作用时，我认为我运气不好。这正是我所缺少的:) (2认同)
问题不在overflow-xbody标签上。这是因为overflow-x与overflow-y上html标签。将其从HTML标记中删除后，我可以将自己想要的任何溢出物放在身上。
在以下情况下会发生这种情况：
overflow-x被设置为auto，hidden，overflow，或scrolloverflow-y被设置为auto，hidden，-webkit-paged-x，或-webkit-paged-y
不必显式调用overflow-x或overflow-y，因为overflow它们都设置了。
我在使用Windows 10的Chrome 67上。