html - 绝对定位内容重叠页脚

Question

我有以下 html...

<div class="maincontent">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at metus nisi. Sed blandit, nunc eget ornare porta, lorem est cursus eros, in ultricies enim mi eget leo. Integer a odio at neque lobortis fermentum ac at purus. Vivamus faucibus nec tortor at sagittis. Nam lectus metus, scelerisque vehicula orci ac, lacinia elementum lorem. Nam efficitur mauris quis tortor efficitur, vitae viverra metus semper. Nunc id euismod purus.

<div class="container">
  <div class="box1">
    Box 1 Content
  </div>
  <div class="box2">
    Box 2 Content
  </div>
  <div class="box3">
    Box 3 Content
  </div>
</div>

</div>

<footer>
  This is the footer
</footer>

.container{position:relative;}
.box1{position:absolute;top:0;background:red;color:white;}
.box2{position:absolute;top:20px;background:green;color:white}
.box3{position:absolute;top:40px;background:blue;color:white;}

https://jsfiddle.net/25w7cxv1/

由于某些原因，页脚显示不正确，并与其余内容重叠。我做错了什么？

Answer 1

通过给每个 .box一个position:absolute ，您将它们从文档流中取出，然后将它们与定位的父级(或祖先)进行绝对定位。

<footer>仍在文档流中，因此将直接出现在 .maincontent 中的文本之后.

这里我删除了position:absolute以便框在文档中保持内联:

.container{position:relative;}
.box1{background:red;color:white;}
.box2{background:green;color:white}
.box3{background:blue;color:white;} 

在这里我给了盒子一个属性 display: table这样它们的宽度就和它们的内容一样宽:

.box1, .box2, .box3 {display: table;}

我认为这可以实现您想要实现的目标。

fiddle :https://jsfiddle.net/gmncpn82/