HTML中，相對定位與絕對定位，以及z-index
之前一直搞不明白html中positon:relative; 和 position:absolute;這兩個屬性。這裡記錄一下。
理論解釋：
相對定位：該元素相對於自己原有位置，偏移一定距離。相對的是自己。
絕對定位：該元素相對於其父元素，偏移一定距離。相對的是父元素，重點是這個父元素也需要是設定了position屬性。從最近的父元素開始找，直到找到body位置為止。
好吧，光看理論解釋可能有點懵逼，還是來個小demo吧，直觀。。。
1）相對定位
<div id="test">
<p class="p1">相對定位：相對於自己原來的位置，偏移一些距離</p 對應的css樣式：
#test{
height: 300px;
width: 300px;
background: gray;
}
/*p標籤本身會有padding和margin值*/
p{
margin: 0px;
padding: 0px;
}
.p1{
height 執行後效果是：(這時沒有設定position屬性呢)
然後，給p1設定相對定位
.p1{
height: 100px;
width: 100px;
background: blue 執行後效果如下：
ok了，相對定位就是這樣啦，需要注意的是，p1雖然偏移了，但是同時它還佔著它原來的位置。
2）絕對定位
再增加一個div
<body>
<div id="test">
<p class="p1">相對定位：相對於自己原來的位置，偏移一些距離</p>
<p class="p2">相對定位,相對的是自己</p>
</div>
<div id="test2">
<p class="p3">絕對定位：相對於自己父元素的位置，偏移一些距離</p>
<p class="p4">絕對定位,相對的是父元素</p>
</div>
</body>相應的樣式
#test2{
height: 300px;
width: 300px;
background: pink;
}
.p3{
height: 100px;
width: 100px;
background: green;
/*設定絕對定位*/
position: absolute;
left: 30px;
top: 30px;
}
.p4{
height: 90px;
width: 90px;
background: gold;
}同時將p1的相對定位去掉。這時候效果如下：
然後給p3設定絕對定位：
.p3{
height: 100px;
width: 100px;
background: green;
/*設定絕對定位*/
position: absolute;
left: 30px;
top: 30px;
}
.p4{
height: 90px;
width: 90px;
background: gold;
}覺得效果是怎樣呢？因為test2是p3的父元素，所以猜測效果是p3相對於test2，向左偏移30px，向下偏移30px。那麼究竟是不是這樣呢？？執行後效果如下：
我擦，跟想的不一樣啊。。。
別急，這是因為：雖然test2是p3的父元素，但是test2沒有設定position屬性，所以p3就會繼續向上找，找test2的父元素，直至到body為止。所以就出現瞭如上效果。那麼，如果想p3相對於test2，向左偏移30px，向下偏移30px，只需給test2設定position屬性即可。
#test2{
height: 300px;
width: 300px;
background: pink;
position: relative;
}效果如下：
ok啦，這就是絕對定位。相對的是父元素。
需要注意的是：絕對定位的元素不佔原來的位置，這就是p4移動到test2左上角的原因。
補充：如果頁面中存在兩個position:absolute;那麼怎麼確定哪個覆蓋哪個呢？
解決：設定其後的z-index的值，值越大，哪個就覆蓋，另一個是被覆蓋