關於相對定位與絕對定位的區別
阿新 • • 發佈:2018-07-15
重點 tex 屬性 原因 rul com -a div 去掉
之前一直搞不明白html中positon:relative; 和 position:absolute;這兩個屬性。這裏記錄一下。
理論解釋:
相對定位:該元素相對於自己原有位置,偏移一定距離。相對的是自己。
絕對定位:該元素相對於其父元素,偏移一定距離。相對的是父元素,重點是這個父元素也需要是設置了position屬性。從最近的父元素開始找,直到找到body位置為止。
好吧,光看理論解釋可能有點懵逼,還是來個小demo吧,直觀。。。
1)相對定位
<div id="test">
<p class="p1">相對定位:相對於自己原來的位置,偏移一些距離</p>
<p class="p2">相對定位,相對的是自己</p>
</div>
- 1
- 2
- 3
- 4
對應的css樣式:
#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;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
運行後效果是:(這時沒有設置position屬性呢)
然後,給p1設置相對定位
.p1{
height: 100px;
width: 100px;
background: blue;
/*設置相對定位*/
position: relative;
/*相對於左邊偏移20px,相對於上邊偏移20px*/
left: 20px;
top:20px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
運行後效果如下:
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
相應的樣式
#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;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
同時將p1的相對定位去掉。這時候效果如下:
然後給p3設置絕對定位:
.p3{
height: 100px;
width: 100px;
background: green;
/*設置絕對定位*/
position: absolute;
left: 30px;
top: 30px;
}
.p4{
height: 90px;
width: 90px;
background: gold;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
覺得效果是怎樣呢?因爲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;
}
- 1
- 2
- 3
- 4
- 5
- 6
效果如下:
ok啦,這就是絕對定位。相對的是父元素。
需要註意的是:絕對定位的元素不占原來的位置,這就是p4移動到test2左上角的原因。
關於相對定位與絕對定位的區別