CSS 为什么 div 重叠?

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

这是代码(我原来的 css 代码是由 css 的 Chris Happy 改进的 - 为什么我的导航div 和中间div 重叠？

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 导航和div 中间重叠导致它们相互忽略，并且都相对于div #container 定位。您可以为div 提供固定的 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>

相关内容

最新更新

热门标签：