相对定位:该元素相对于本身原有位置,偏移必定距离。相对的是本身。css
绝对定位:该元素相对于其父元素,偏移必定距离。相对的是父元素,重点是这个父元素也须要是设置了position属性。从最近的父元素开始找,直到找到body位置为止。3d
1)相对定位code
相对定位:相对于本身原来的位置,偏移一些距离
相对定位,相对的是本身
对应的css样式:blog
#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;
}
运行后效果是:(这时没有设置position属性呢)图片
而后,给p1设置相对定位it
.p1{
height: 100px;
width: 100px;
background: blue;
/*设置相对定位*/
position: relative;
/*相对于左边偏移20px,相对于上边偏移20px*/
left: 20px;
top:20px;
} 运行后效果以下:
2)绝对定位io
再增长一個divclass
相对定位:相对于本身原来的位置,偏移一些距离
相对定位,相对的是本身
绝对定位:相对于本身父元素的位置,偏移一些距离
绝对定位,相对的是父元素
相应的样式test
#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的相对定位去掉。这时候效果以下:im
然後給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左上角的缘由。