定位position

320 阅读1分钟

给元素定位的三种方式:绝对定位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>