请教老师一下，为什么给外面盒子设置margin后，里面的两个小盒子与大盒子的相对位置没有改变呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.par{width:180px;height:200px;
border:1px solid red;
margin-left:30px;
margin-top:30px;
}
.son{width:50px;height:50px;
border:1px solid black;
}
.son2{width:50px;height:50px;
border:1px solid green;
}
</style>
</head>
<body>
<div class="par">
<div class="son"></div>
<div class="son2"></div>
</div>
</body>
</html>
正在回答
同学，你好。
设置相对定位relative是相对于它自身进行定位，所以设置left：0，top：0，它的位置是不变的，
绝对定位absolute是相对于它第一个不为static定位的父元素进行定位，如果没有会一直向上查找，最后相对于body进行定位，因为.son盒子的父元素.pre盒子没有设置定位，因此.son盒子会相对于body进行定位。因此.son盒子会在页面的左上角。进行如下设置可以让定位的元素和第一种效果一样，如图：
祝学习愉快！
body{margin: 0;}
.par{width:180px;height:200px;
border:1px solid red;
margin-left:30px;
margin-top:30px;
background-color: red;
}
.son{width:50px;height:50px;
border:1px solid black;
margin:30px 0 0 30px;
}
.son2{width:50px;height:50px;
border:1px solid green;
margin:30px 0 0 30px;
不知道你说的什么意思，是小盒子位置没有变化吗，我照着你的代码写了一次，大盒子位置变了，小盒子也会一起移动，如果想让小盒子在大盒子里面也实现上外边距30 左外边距30，需要给小盒子设置margin属性，这是我做的最终效果
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星