CSS z-index和絕對位置

我有這個測試網址：http://effectwave.com/test/responsive/viewport/index-test.htm 我想內容部分（藍色區域）應該超過頁腳區域。它說'Footer Content'的地方應該相應地被壓低。CSS z-index和絕對位置

我知道這可以通過z-index和絕對定位來實現。我已經試過它無濟於事，我不是一個專家。有人可以幫忙嗎？

來源

2013-12-15 user3104483

以下是否做你想要的？

.wrapper { 
    position: relative; 
    z-index: 10; 
} 
footer { 
    margin-top: -430px; 
} 
.footer-content { 
    padding-top: 440px; 
}

來源

2013-12-15 17:09:00 towr

謝謝你的幫助。這是一個很好的起點。我可以玩數字，並得到我想要的結果。但是因爲我對此很陌生，請您解釋一下這裏發生了什麼，以便我可以將這些知識用於將來的應用？ – user3104483

'z-index：10'和'position：relative'確保包裝被放置在其他東西的頂部，但不移動其他東西沒有任何變化。負邊緣頂部將頁腳向上移動，使其位於包裝紙下面;但這也意味着它的文本現在位於包裝之下。 'padding-top'在頂部創建了額外的空白空間，這樣我們就可以將頁腳的文本再次按下。 – towr

CSS z-index和絕對位置

回答

相關問題