html - CSS 为什么 div 重叠？

我正在尝试仅使用 CSS 创建响应式网站。 .我有一个容器，里面有所有的代码。在那里，我有导航 div 和中间 div。容器是相对定位的，而导航和中间是绝对定位的。此外，有点奇怪的问题，但在 Internet Explorer 中(不要判断)导航部分的下拉菜单是水平而不是垂直打开的。我似乎找不到这样做的原因。

这是代码(我原来的 css 代码由 Chris Happy 从 css- why are my nav div and middle div are overlapping? 改进)

div#Container
    {
      position: relative;
    }

    .nav
    {
      width: 100%;  
      position: absolute;
      background-color: white;  /*Code to add a white background to list*/
      padding: 15px;  
    }

      .nav a
          {
            color: #ffffff;
            text-decoration: none;
            background-color: #000000;
          }

          .nav ul
          {
            display:block;
          }

          .nav ul a
          {
            display: block;
            float:left;
            width: 150px;
            padding: 10px 20px;
            border: 1px solid #ffffff;
            text-align: center;
            font-size: 1.3em;
          }

          .nav ul a:hover
          {
            background: red;
          }

          .nav ul li
          {
            display: inline-block;
            vertical-align: top;
          }
          
          .nav ul ul li {  display: block;  }

          .nav ul li:hover &gt; ul
          {
            display:block;
          }

          .nav ul li ul
          {
            margin:0;
            padding: 0;
            display: none;
            background-color: #000000;
            top: 45px;
           }

div#middle
 {
   position: absolute;
 }

<div id="Container">
      <div class="nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Cars</a></li>
          <li><a href="#">Parts &amp; Tools</a>
            <ul>
              <li><a href="#">Parts</a></li>
              <li><a href="#">Tools</a></li>
            </ul>
          </li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
      
      <div class="middle">
        <p>text</p>
      </div>
     
    </div>

最佳答案

我没有看到中间 div 的 HTML，但绝对位置意味着相对于 div #container 的“框架”的固定位置。所以 div nav 和 div middle 重叠导致它们相互忽略并且都相对于 div #container 定位。您可以为 div 提供固定的宽度和高度以及固定的边距，这样它们就不会发生碰撞。示例:

.nav
{
position: absolute;
margin-top:  0;
margin-left: 0;
width: 300px;
}
.middle
{
position: absolute;
margin-top: 0;
margin-left: 300px;
}

另一个例子

<html>
<head>
</head>
<body>
<div style="position: relative;border: solid;margin: 40px;height: 300px;">
<div style="position: absolute; margin: 50px 100px; border: solid; width: 100px;height: 100px;">
</div>
<div style="position: absolute; margin: 40px 90px; border: solid; width: 100px;height: 100px;">
</div>
</div>
</body>
</html>

关于html - CSS 为什么 div 重叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52719617/

html - CSS 为什么 div 重叠？

上一篇：html - 如何通过简单的 css 自定义日期选择器？

下一篇：javascript - 滚动浏览一系列图像，