Question

我在div1内的页面顶部修复了一个静态标头。下面我有另一个空的div2，然后是另一个div3，其中我显示了一些数据。

点击div3中的按钮，我正在尝试使用innerHTML显示一些内容。这工作正常。但问题是我希望div2也固定在div1旁边，以便即使页面滚动也不会受到影响。

当我将CSS位置定为固定时，div2会重叠div3。位置为静态，它不会重叠div3，但它可以滚动而不是固定。

代码是这样的：

HTML：

<div id="header">Header</div>
<div id="panel"></div>
<div>Content</div>

JS：

点击按钮

var panel = document.getElementById('panel');
panel.innerHTML = "<div>Hello World</div>";

CSS：

#header {
    left: 0;
    top: 0;
    width: 100%;
    color: #fff;
    z-index: 200;
    position: fixed;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0F4DBC', endColorstr='#00A9E0', GradientType=1);
    background: -webkit-linear-gradient(left, #0F4DBC, #00A9E0);
    background: -moz-linear-gradient(left, #0F4DBC, #00A9E0);
    background: -ms-linear-gradient(left, #0F4DBC, #00A9E0);
}

那么我该如何解决这个问题？

Answer 1

固定定位类似于绝对定位，但元素的包含块是视口。因此，每当您提供position: fixed时，它的下一个同级元素必须包含padding-top/margin-top等效于height定位元素的fixed。

在您的情况下，您必须将padding-top/margin-top提供给#panel相当于height的{{1}}。

代码段

#header

这样就可以了。

最好包装<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <style> body { padding: 0; margin: 0; } #header { background: -webkit-linear-gradient(left, #0f4dbc, #00a9e0); background: -moz-linear-gradient(left, #0f4dbc, #00a9e0); background: -ms-linear-gradient(left, #0f4dbc, #00a9e0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0f4dbc', endColorstr='#00a9e0', GradientType=1); color: #fff; height: 30px; left: 0; line-height: 30px; position: fixed; top: 0; width: 100%; z-index: 200; } #panel { /*padding-top: 30px;*/ margin-top: 30px; } </style> </head> <body> <div id="header">Header</div> <div id="panel"></div> <div>Content</div> <script> // var panel = document.querySelector('#panel'); var panel = document.getElementById('panel'); panel.innerHTML = "<div>Hello World</div>"; </script> </body> </html>＆amp; {}包含#panel的{{1}}   单独div将其与定位的Content分开   元件。然后，您可以#contentWrapper   fixed。

在您的情况下，如果您的padding-top/margin-top已设置，这将有所帮助   #contentWrapper触发器innerHTML触发器不会包含任何数据，直到   事件被触发＆amp;因此event (Click, etc)与#panel不会重叠   在div中包含Content定位元素   与fixed。

<强> CSS
#contentWrapper
<强> HTML
padding-top/margin-top

您可以参考Mozilla/position来更好地理解这个概念。

希望这有帮助！

Answer 2

而不是固定div 1和2。试试这个：

<div style="position:fixed">
  <div>Header</div>
  <div id="panel"></div>
</div>
<div>Content</div>

这意味着您的第二个div将随标题一起移动，因为它们包含在具有固定位置的div中。

使用innerHTML显示的动态div重叠现有的静态内容

2 个答案: