在CSS中,所谓绝对定位指的是“相对于”已经定位的祖先元素,如果不存在已经定位的祖先元素,那么就“相对于”最初的包含快(一般情况下为body);相对定位指的是相对于元素初始位置进行定位。
绝对定位本身与文档流无关,因此不占空间,普通文档流中的元素的布局就当绝对定位的元素不存时一样,所以 它们可以覆盖页面上其他的元素,且可以通过z-index属性来控制这些层的对方顺序。
相对定位
相对定位比较简单,如果在某个元素中设置了position属性为relative,那么该元素会相对于初始位置进行定位
相对定位不会脱离文档流(文档流表示针对窗体而言,自上而下分为多行,从而依左至右排放元素),即当第二个盒子按照left:30px;top:40px;的设置相对移动之后,原来的位置其实是保持不变,第三个盒子不会占用第二个盒子的原始位置。
绝对定位
绝对定位相对于上述情况,则相较于复杂一点。绝对定位需要找到设置绝对定位的元素的祖先元素,它会根据离其最近的祖先元素进行定位。
根据上图可以明显的看出,当第二个盒子设置为绝对定位之后,该盒子脱离文档流,并且它的原始位置已经被第三个盒子所替代。接着第二个盒子开始查找它的“参照物”,由于白色盒子的postion属性为默认值,于是向上层级查找,橘色盒子position:absolute,在绝对定位中,符合祖先元素的条件(定位设置为非static),因此第二个盒子会以橘色盒子为参照物进行向左和向下移动。
有了绝对定位和相对定位,top和left才能起作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0px;
padding:0px
}
#div1{
width:2000px;
height: 400px;
background-color: orange;
}
#div2{
margin:10px;
width: 200px;
height: 200px;
float:left;
background-color: blue;
}
#div3{
position: absolute;
left:60px;
top:40px;
margin:10px;
width: 200px;
height: 200px;
float:left;
background-color: red;
}
#div4{
margin:10px;
width: 200px;
height: 200px;
float:left;
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
</body>
</html>
自己编写的代码如下