绝对定位的内容重叠页脚

我有以下的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/

出于某种原因，页脚显示不正确，并正在由内容的其余部分重叠。我究竟做错了什么？

来源

2016-07-28 fightstarr20

通过给予每个.box a 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;}

我认为这是做你正在努力实现的。

小提琴：https://jsfiddle.net/gmncpn82/

来源

2016-07-28 17:03:49 ksav

绝对定位的内容重叠页脚

回答

相关问题