css中可以用position:absolute实现元素绝对定位,但是这个绝对定位是以document为参照物进行定位的。
如果要实现基于父级元素的绝对定位,那么要设置父元素的position为:relative。
示例代码:
<!doctype html>
<html>
<style>
.father1 {
position: relative;
width:200px;
margin:100px auto;
height:200px;
border:1px solid red;
float:left;
}
.father2 {
width:200px;
margin:100px auto;
height:200px;
border:1px solid red;
float:right;
}
.son {
position: absolute;
top: 0;
background:#f0f0f0;
}
</style>
<body>
<div class="father1">
<div class="son">I am father1 -> son</div>
</div>
<div class="father2">
<div class="son">I am father2 -> son</div>
</div>
</body>
</html>
实际效果:
father1设置了position: relative;,因此元素son基于father1进行绝对定位,而father2并未设置position: relative;,因此元素son基于document进行绝对定位。