CSS 为什么 div 会重叠？

Question

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

这是代码（我原来的 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>

Answer 1

我没有看到中间 div 的 HTML，但是绝对位置意味着相对于 "frame" 在你的情况下相对于 div 的固定位置＃容器。所以 div 导航和 div 中间重叠导致它们相互忽略并且都相对于 div #container 定位。您可以给 divs 固定的宽度和高度以及固定的边距，这样它们就不会发生碰撞。示例：

.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>

CSS 为什么 div 会重叠？

CSS Why do the divs overlap?

html

css

xhtml