絕對定位的內容重疊頁腳

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

絕對定位的內容重疊頁腳

回答

相關問題