透過將margin設定為負值,並搭配postion:relative;與z-index可以控制同等級的div前後覆蓋的順序。要注意到的是子元素一定會蓋在父元素上,要相疊的兩個div層級要相同。預設在結構上排在越想被蓋在上面的div,只要設定relative,配合margin設定負值,加上z-index,就可以不使用絕對定位的調整div層疊的順序。
以下面這段原始碼為例子
<div id=”all”>
<div id=”a01″>
</div>
<div id=”a02″>
</div>
<div id=”a03″>
</div>
</div>
#a01~#a03是同等級的。
如果希望a03蓋在a02、a01之上,比較單純,因為a03在順序上排在比較下面,因此預設圖層順序排在比較上面,只要在a03設定以下屬性,就可以覆蓋在a02跟a01之上
#a03{
margin-top:-20px;}
如果希望a02蓋在a01 之上,那設定一樣。但是假設在排版上希望a02顯示在a01的上方,但是又希望a01在圖層順序上壓在a02之上的話要怎麼做呢?
#a01{
position:relative;}
這樣設定就可以了,如果有多層的話,就搭配z-index
#a01{
position:relative;
z-index:5;}
所有同層級的div,只要設定 position:relative; 就可以使用 z-index 決定看哪個div要壓在上面。所以有的定位可以用這個方法取代position:absolute;(因為據說畫面上用太多position:absolute; 有時候會造成奇怪的問題)