关于相对定位和绝对定位的理解问题
来源：2-5 position-relative
慕仔7690617
2017-07-11 22:39:43
<!DOCTYPE html>
<html>
<head>
<title>ceshi</title>
<style type="text/css">
*{margin:0px;
/*margin-left:0px;*/
}
.a1{
background-color: red;
position:relative;
width:500px;
height:500px;
top:50px;
left:50px;
}
.a2{
background-color: yellow;
position:relative;
width:200px;
height:200px;
top:20px;
left:20px;
}
.a3{
background-color: blue;
position:relative;
width:50px;
height:50px;
top:20px;
left:20px;
}
</style>
</head>
<body>
<div class="a1">
<div class="a2">
<div class="a3">
</div>
</div>
</div>;
</body>
</html>你好，
<!DOCTYPE html>
<html>
<head>
<title>ceshi</title>
<style type="text/css">
*{margin:0px;
/*margin-left:0px;*/
}
.a1{
background-color: red;
position:absolute;
width:500px;
height:500px;
top:50px;
left:50px;
}
.a2{
background-color: yellow;
position:absolute;
width:200px;
height:200px;
top:20px;
left:20px;
}
.a3{
background-color: blue;
position:absolute;
width:50px;
height:50px;
top:20px;
left:20px;
}
</style>
</head>
<body>
<div class="a1">
<div class="a2">
<div class="a3">
</div>
</div>
</div>;
</body>
</html>这两种情况中，我分别把三个div全部设置成相对定位和绝对定位，可以看到的视觉效果都是一样的，请问这两种方式有什么不一样的吗？
写回答
2回答
-
小丸子爱吃菜
2017-07-12
1、relative生成相对定位的元素，相对于其原有位置进行定位，所以第一个代码就是相对于它原有的位置进行定位。
2、absolute生成绝对定位的元素，相对于有设置position属性的第一个父元素进行定位，所以a1针对父元素body进行定位，a2针对a1的位置进行定位，a3针对与a2进行定位。
两个虽然效果一样，但是针对的定位是不同的，relative针对的是本身原有的位置，absolute针对的是有position属性的父元素。
祝学习愉快！
1h017-08-07 -
樱桃小胖子
2017-08-07
当设定position:absolute，如果父级（无限）没有设定position属性，那么当前的absolute则结合trbl属性以浏览器左上角为原始点进行定位 ，如果父级（无限）设定position属性，那么当前的absolute则结合trbl属性以父级（最近）的左上角为原始点进行定位。 当设定position: relative ，则参照父级（最近）的内容区的左上角为原始点结合trbl属性进行定位（或者说相对于被定位元素在父级内容区中的上一个元素进行偏移），无父级则以body的左上角为原始点。相对定位是不能层叠的。在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。一般情况下，我们使用绝对定位，都会给父级元素天津爱相对定位，希望可以帮到你！
0
相似问题