关于相对定位和绝对定位的理解问题
<!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全部设置成相对定位和绝对定位，可以看到的视觉效果都是一样的，请问这两种方式有什么不一样的吗？
40
收起
正在回答 回答被采纳积分+1
2回答
卡布琦诺
2017-08-07 10:32:18
当设定position:absolute，如果父级（无限）没有设定position属性，那么当前的absolute则结合trbl属性以浏览器左上角为原始点进行定位 ，如果父级（无限）设定position属性，那么当前的absolute则结合trbl属性以父级（最近）的左上角为原始点进行定位。 当设定position: relative ，则参照父级（最近）的内容区的左上角为原始点结合trbl属性进行定位（或者说相对于被定位元素在父级内容区中的上一个元素进行偏移），无父级则以body的左上角为原始点。相对定位是不能层叠的。在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。一般情况下，我们使用绝对定位，都会给父级元素天津爱相对定位，希望可以帮到你！
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星