为什么一个<div>会覆盖另一个<div>？

Question

为什么一个<div>会覆盖另一个<div>？

12

这是我的网页HTML：

<body>
  <header></header>
  <div class="conteudo_representantes"></div>
  <div class="rodape"></div>
</body>

我有一些内容在.conteudo_representantes div中，这些内容超出了.rodape（页脚）div的范围。

这是我的页面CSS：

.conteudo_representantes {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    min-height:586px;
    margin-top:40px;
    position: relative;
}


.rodape {
    position: relative;
    width:960px;
    height:50px;
    margin:36px auto;
    background:transparent url(../img/header_pattern.png) repeat top left;
}

完整的页面源代码可以在此示例中找到。(单击列表的第二行，其中写着：02-圣保罗-首都，以查看此问题的实际情况。)

我做错了什么？

- Preston

2个回答

1

如果我没记错的话，这是因为你在#container中指定了min-height。这样可以使其在内容超过该高度时自动增长。而且由于它是min-height，当内容变得更大时，它不会将页脚推下去。 更新：通过给#footer添加clear:both属性应该可以解决问题。

- ayyp

如果您将 display:block; 应用于其中一个或两个元素，会发生什么？ - ayyp

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RonnyKnoxville · Accepted Answer

问题在于您的

conteudo_representantes

没有正确地包含所有内容，因此页脚相对位置正确，而

representantes

由于某种原因溢出。

编辑：

实际上是与您管理float属性的方式有关。

您的

representantes

向左浮动，但页脚不浮动。您可以通过关闭

representantes

上的float:left来测试这一点。

这是重叠div的常见原因。

在布置HTML页面时，请考虑每个

元素如何堆叠到下一个

元素上。最终，float元素将决定

元素的堆叠方式。

这里是正确堆叠元素的快速guide。