HTML – 为什么一个重叠另一个?

前端之家收集整理的这篇文章主要介绍了HTML – 为什么一个重叠另一个?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我的页面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;
}

整个页面源可以在这个example中找到.(单击列表的第二行,其中显示:02 – SãoPaulo – Capital,以查看此问题的实际效果.)

我究竟做错了什么?

解决方法

问题是你的div conteudo_representantes没有正确地包装它的所有内容,所以就它而言,页脚处于正确的相对位置并且代表div由于某种原因溢出

编辑:

实际上,这与您管理浮动属性的方式有关.

你的div代表浮动向左,但页脚没有.你可以通过从代表div中关闭float:left来测试这个.

这是div重叠的常见原因.

在布置HTML页面时,请考虑每个div元素如何堆叠到下一个. float元素最终将决定div的堆栈方式

快速正确地堆叠元素guide

猜你在找的HTML相关文章