相對定位：該元素相對于自己原有位置，偏移一定距離。相對的是自己。
絕對定位：該元素相對于其父元素，偏移一定距離。相對的是父元素，重點是這個父元素也需要是設定了position屬性。從最近的父元素開始找，直到找到body位置為止。
1）相對定位
對應的css樣式：<div id="test"> <p class="p1">相對定位：相對于自己原來的位置，偏移一些距離</p> <p class="p2">相對定位,相對的是自己</p> </div>運作後效果是：(這時沒有設定position屬性呢)#test{ height: 300px; width: 300px; background: gray; } /*p标簽本身會有padding和margin值*/ p{ margin: 0px; padding: 0px; } .p1{ height: 100px; width: 100px; background: blue; } .p2{ height: 80px; width: 80px; background: red; }然後，給p1設定相對定位
html相對定位和絕對定位 運作後效果如下：.p1{ height: 100px; width: 100px; background: blue; /*設定相對定位*/ position: relative; /*相對于左邊偏移20px,相對于上邊偏移20px*/ left: 20px; top:20px; }
html相對定位和絕對定位 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>同時將p1的相對定位去掉。這時候效果如下：#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; }然後給p3設置絕對定位：html相對定位和絕對定位 覺得效果是怎樣呢？因爲test2是p3的父元素，是以猜測效果是p3相對于test2，向左偏移30px，向下偏移30px。那麽究竟是不是這樣呢？？運作後效果如下：.p3{ height: 100px; width: 100px; background: green; /*設置絕對定位*/ position: absolute; left: 30px; top: 30px; } .p4{ height: 90px; width: 90px; background: gold; }html相對定位和絕對定位 我擦，跟想的不一樣啊。。。
別急，這是因為：雖然test2是p3的父元素，但是test2沒有設置position屬性，是以p3就會繼續向上找，找test2的父元素，直至到body為止。是以就出現了如上效果。那麽，如果想p3相對于test2，向左偏移30px，向下偏移30px，隻需給test2設置position屬性即可。
效果如下：#test2{ height: 300px; width: 300px; background: pink; position: relative; }html相對定位和絕對定位 ok啦，這就是絕對定位。相對的是父元素。
需要注意的是：絕對定位的元素不占原來的位置，這就是p4移動到test2左上角的原因。