给元素定位的三种方式:绝对定位absolute,相对定位relative,固定定位fixed
position:
absolute:定位后会释放空间,相对于最近的已定位的祖先元素进行定位,通常设置left,top值。
relative:定位不释放空间,相对于自身的定位。
fixed:定位后释放空间,相对于当前浏览器窗口定位。
absolute 与 relative :
<style>
#contain{
position: relative;
width: 300px;
height: 300px;
background: red;
}
#wapper{
position:absolute;
left:50px;
top: 50px;
width: 100px;
height: 100px;
background: pink;
}
</style>
<body>
<div id="contain">
<div id="wapper">
</div>
</div>
</body>