之前一直搞不明白html中positon:relative; 和 position:absolute;這兩個屬性。這裡記錄一下。
理論解釋：
相對定位：該元素相對於自己原有位置，偏移一定距離。相對的是自己。好吧，光看理論解釋可能有點懵逼，還是來個小demo吧，直觀。。。絕對定位：該元素相對於其父元素，偏移一定距離。相對的是父元素，重點是這個父元素也需要是設定了position屬性。從最近的父元素開始找，直到找到body位置為止。
1）相對定位
相對定位：相對於自己原來的位置，偏移一些距離p>
相對定位,相對的是自己p>
div>
對應的css樣式：
#test
/*p標籤本身會有padding和margin值*/
p.p1
.p2
然後，給p1設定相對定位
.p1
ok了，相對定位就是這樣啦，需要注意的是，p1雖然偏移了，但是同時它還佔著它原來的位置。
2）絕對定位
再增加乙個div
相對定位：相對於自己原來的位置，偏移一些距離p>
相對定位,相對的是自己p>
div>
絕對定位：相對於自己父元素的位置，偏移一些距離p>
絕對定位,相對的是父元素p>
div>
body>
相應的樣式
#test2
.p3.p4
然後給p3設定絕對定位：
.p3
.p4
我擦，跟想的不一樣啊。。。
別急，這是因為：雖然test2是p3的父元素，但是test2沒有設定position屬性，所以p3就會繼續向上找，找test2的父元素，直至到body為止。所以就出現了如上效果。那麼，如果想p3相對於test2，向左偏移30px，向下偏移30px，只需給test2設定position屬性即可。
#test2
ok啦，這就是絕對定位。相對的是父元素。
需要注意的是：絕對定位的元素不佔原來的位置，這就是p4移動到test2左上角的原因。
關於相對定位與絕對定位
1.相對定位 相對自身正常位置的偏移 position relative 1 top 10px left 10px 2 bottom 10px right 10px 兩種情況如下所示 綠色塊狀為初始正常位置，橙色指的是給它相對定義後的位置 2.絕對定位 指相對于父元素的四個方向 top,left，r...
絕對定位與相對定位的區別
相對定位是普通流定位，相對定位的元素出現在它在普通流該出現的位置，普通流你可理解為文件流就行了。這個佔空間的。絕對定位它的位置和文件流無關且不佔空間。關於position屬性 position 開放分類 html css web標準 網頁設計 bottom right top z index lef...
相對定位與絕對定位的區別
你對css相對定位和絕對定位區別是否了解，這裡和大家分享一下，css絕對定位使元素的位置與文件流無關，因此不佔據空間。這一點與css相對定位不同，css相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。css相對定位 css相對定位是乙個非常容易掌握的概念。如果對乙...