如何定位在CSS

以下頁眉和頁腳的主要內容我有這一塊的html：如何定位在CSS

<html> 
    <body> 
     <header></header> 
     <div></div> 
     <footer></footer> 
    </body> 
</html>

和這片CSS的：基本上http://jsfiddle.net/XGTtT/：

header { 
    width: 500px; 
    height: 100px; 
    background: red; 
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5); 
    z-index: 10; 
} 

div { 
    width: 500px; 
    height: 700px; 
    background: yellow; 
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5); 
    z-index: 5; 
} 

footer { 
    width: 500px; 
    height: 50px; 
    background: blue; 
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5); 
    z-index: 10; 
}

你也可以在這裏看到這，我想在其他兩個區域下面有黃色區域，但z-index似乎不起作用。什麼是錯誤的以及如何解決它？

來源

2012-10-25 Łukasz Zaroda

的z-index只適用。 –

要實現位於前面或下面的元素，您將需要使用絕對定位和z-index的混合，因爲z-index不會目前使用靜態的默認定位工作。

根據您想要達到的目標，可能更容易將position: relative添加到div，然後在div上使用負邊距將其拉起/在頁眉和頁腳下方。如果你有一個從靜態的不同的位置

來源

2012-10-25 15:13:57

數字越高，數字越低。 A nd給每個元素一些不同的數字。類似於div 1，header 2和footer 3.

來源

2012-10-25 15:08:12

header { 
    width: 500px; 
    height: 100px; 
    background: red; 
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5); 
    z-index: 10; 
    position: absolute; 
    top:0; 
} 

div { 
    width: 500px; 
    height: 450px; 
    background: yellow; 
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5); 
    z-index: 5; 
    position: absolute; 
} 

footer { 
    width: 500px; 
    height: 50px; 
    background: blue; 
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5); 
    z-index: 10; 
    position: absolute; 
    bottom: 0; 
}

http://jsfiddle.net/XGTtT/8/

來源

2012-10-25 15:25:53

如何定位在CSS

回答

相關問題