绝对定位于相对定位唯一不同的是：
绝对定位相对于设置过定位的父元素或设置过定位的祖元素，如果前辈元素都没有设置过相对定位，那就相对浏览器。
绝对定位是脱离标准流的，即使用position:absolute;后立即失去原有的占位空间。
请看以下代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素标签定位方式之绝对定位 position:absolute</title>
</head>
<style>
.box{
width:500px;
height:500px;
background:#0f0;
/* 父元素相对定位,子元素绝对定位 */
position:relative;
left: 100px;
top: 100px;
}
.box1{
width:200px;
height:200px;
background:#f00;
margin-left:100px;
/* 绝对定位 脱离标准流 */
position:absolute;
/* 偏移 */
top:100px;
left:50px;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
显示结果如下：
解释一下：
在html中是一个div套着另一个div，即父子关系，我们给父div设置了相对定位，然后设置偏移，即：父元素相对自身向右偏移了100像素，向下偏移了100像素。
子元素高宽均为200像素，左外边距为100像素，此时，子元素的实际占用空间为高100，宽200。
然后又给子元素设置了绝对定位，并向下偏移100像素，向右偏移50像素。
由于父元素设置了相对定位，那么子元素便相对于父元素偏移，最终，子元素距离父元素的左边尺寸为100(子元素的左外边距)+50(子元素的偏移距离)=150像素，距离父元素的顶边为100像素。
总结：
一般而言，我们都是给父元素设置相对定位，给子元素设置绝对定位。因为相对定位不脱离标准流，可以约束子元素，然后通过绝对定位来控制子元素的偏移位置。
|
窥视卡
雷达卡
发表于 2023-2-1 15:29:36
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-18 09:22:52
