CSS绝对定位的奇怪行为[重复]答案

【问题标题】：Strange behavior of CSS absolute positioning [duplicate]CSS绝对定位的奇怪行为[重复]
【发布时间】：2020-08-18 02:47:37
【问题描述】：

我有一个名为“container”的父级，大小为 300px x 120px，封装了 2 s，即“redbox”和“greenbox”。当我将“位置：相对”添加到子 <div>s 的“容器”大小时，看起来是成比例的。但是删除 div 的属性大小会增加 3 倍”。据我所知，位置是定位元素，它如何影响元素的大小。

#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%;
}

<head></head>
<body>
  <div id="container">
    <div id="redbox"></div>
    <div id="greenbox"></div>
  </div>
</body>

【问题讨论】：

这都是关于包含块：如果元素具有'position：absolute'，则包含块由最近的祖先建立，其'position'为'absolute'，'relative'或'固定'，以下列方式：

标签： html css

【解决方案1】：

发生这种情况的原因是因为您使用百分比作为宽度和高度。绝对定位是相对于最近的具有position: relative 的父元素如果没有任何条件，则父元素是<body> 元素。

当您在#container 上设置position: relative 时，您正在将相对父级的大小更改为红色和绿色框。由于您使用的是百分比，因此红色和绿色框的大小会相应变化。

【讨论】：