Question

我有一个div，我用作“sidepanel”，宽度：100％，位置：固定。这个侧板包含我的导航。我还有一个名为“content”的div。它的宽度为600px，我习惯于“margin-left：auto，margin-right：auto”将它放在sidepanel和页面边缘之间。

但问题在于两个div是重叠的。如何阻止它重叠？我在下面提供了HTML和CSS编码。

HTML

<body>
<div id="leftpanel">
    <div id="nav">
      <ul>
              <li><a href="index.html">home</a></li>
            <li><a href="">the future</a></li>
            <li><a href="">contact details</a></li>
        </ul>
    </div>
</div>

<div id="content">
    <div id="header">
        <p><img src="images/haroon-ahmed.png" class="imgaligncentre"/></p>
    </div>
</div>
</body>`

CSS

#leftpanel {
float:left;
height:100%;
width:320px;
postion:fixed;
}
#content {
width:600px;
padding-top:50px;
padding-bottom:50px;
margin-right:auto;
margin-left:auto;
}

Answer 1

这就是阻止它们重叠的方法。

DEMO

#content {
   margin-left: 320px;
}

使用position:fixed;时，表示该元素不关心页面上的其他元素。它并不关心它是否在它们下面触摸它们。它只关心它相对于窗口的位置（即：用户的屏幕）。

因为你的#leftpanel位于最左侧，宽度为320.只需将#content的左边距设置为320px即可。

HTML - 如何停止div重叠

1 个答案: