Question

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

这里是代码（css- why are my nav div and middle div are overlapping?的Chris Happy对我原始的CSS代码进行了改进）

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，但是绝对位置表示相对于div＃容器而言相对于“框架”的固定位置。因此，div nav和div中间重叠导致它们彼此忽略，并且都相对于div #container定位。您可以为divs提供固定的witdh，高度和固定的边距，以免它们发生冲突。示例：

.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重叠？

1 个答案: