css绝对定位和相对定位
相对定位:
相对于它的起点进行移动,移动后原来的位置依旧还被占用着
可以用left right top bottom四个属性来设置标签偏移量
特点:
1.当开启了标签的相对定位后,而不设置偏移量时,标签不会发生任何变化
2.相对定位是相对于标签在文档流中原来的位置进行定位
3.相对定位的标签不会脱离文档流
绝对定位:
开启绝对定位,标签立即脱离文档流
绝对定位是不占空间的
参照物:
离他最近的开启定位的父级标签
特点:
1.开启绝对定位会使标签脱离文档流
2.如果不设置偏移量,标签位置不变
3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位
(一般情况,开启了子标签的绝对定位都会同时开启父标签的相对定位)
如果所有祖先标签都没有开启定位,则会相对于浏览器窗口进行定位
html:
<div class="div2">
div3
<div class="div1">
div1
</div>
</div>
css:
.div1{
background-color: #0000FF;
height: 100px;
width: 100px;
position: absolute;
left: 100px;
top: 100px;
}
.div2{
background-color: #F0F8FF;
height: 200px;
width: 200px;
position: relative;
}
因为div2是div1的父级且是相对定位,div1是绝对定位,所以此时div1在div2的右下角对齐