我有一个名为“container”的父级，大小为300pxx120px，它封装了2个s，即“redbox”和“greenbox”。当我将“position:relative”添加到“container”时，子 null nullS的大小看起来是成比例的。但是删除属性后，div的大小增加了3倍“。据我所知，位置是用来定位元素的，它如何影响元素的大小。
<style>
#container {
width: 300px;
height: 120px;
/*position: relative;*/
border: solid 1px blue;
}
#redbox, #greenbox {
border: solid 1px;
width: 60%;
height: 60%;
position: absolute;
}
#redbox {
background-color: red;
left:0px;top: 0px;
}
#greenbox {
background-color: rgb(21, 255, 0);
left: 30px;top: 30px;
opacity: 50%;
}
</style>
</head>
<body>
<div id="container">
<div id="redbox"></div>
<div id="greenbox"></div>
</div>
</body>
发生这种情况的原因是因为你使用的是宽度和高度的百分比。绝对定位是相对于具有位置的最近父级的:relative如果没有任何条件，则父级是元素。
当您在#container上设置position:relative时，您正在将相对父级的大小更改为红色和绿色框。由于您使用的是百分比，红框和绿框的大小也会相应地改变。
