绝对定位div超出父元素边界：原因分析与修复方法

带有字母C的#third圆形元素设置了top: 0，预期位置如下：

但实际显示位置如下：

相关代码：

CSS代码 #

#wrapper {
  margin: 2em;
  height: 100px;
  min-height: 100px;
  width: 80%;
  min-width: 80%;
  background-color: darkblue;
}

#outside {
  margin: 2em;
  padding: 2em;
  background-color: green;
}

#body-wrapper {
  background-color: purple;
  height: 100vh;
  min-height: 100vh;
  width: 100%;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: silver;
  font-weight: bold;
}

.circle {
  background-color: red;
  border: 1px solid red;
  border-radius: 20em;
  display: inline;
  padding: 1em;
  position: relative;
}

#first {
  left: 5%;
  top: 5%;
}

#second {
  left: 80px;
  top: 20%;
}

#third {
  left: 30%;
  top: 0%;
}

#fourth {
  left: 40%;
  top: 80%;
}

HTML代码 #

<div id='body-wrapper'>
  <div id='wrapper'>
    <div class='circle' id='first'>A</div>
    <div class='circle' id='second'>B</div>
    <div class='circle' id='third'>C</div>
    <div class='circle' id='fourth'>D</div>
  </div>
  <div id='outside'>
    Outside text
  </div>
</div>

核心问题在于.circle类设置了display: inline。对于行内元素，浏览器会直接忽略top、bottom这类垂直方向的定位属性，同时行内元素的布局基于文本基线，#third会跟着前面的A、B元素排在同一文本流中，无法按top:0的设置定位。

有两种常用修复方式，可根据布局需求选择：

方法一：修改元素显示类型 #

将.circle的display属性从inline改为inline-block，既保留元素同行显示的特性，又能让垂直定位属性生效：

.circle {
  background-color: red;
  border: 1px solid red;
  border-radius: 20em;
  display: inline-block; /* 替换原inline属性 */
  padding: 1em;
  position: relative;
}

方法二：改用绝对定位 #

若需要元素完全脱离文本流定位，可将.circle的position改为absolute，同时给父元素#wrapper设置position: relative作为定位参考容器：

#wrapper {
  margin: 2em;
  height: 100px;
  min-height: 100px;
  width: 80%;
  min-width: 80%;
  background-color: darkblue;
  position: relative; /* 添加相对定位作为参考 */
}

.circle {
  background-color: red;
  border: 1px solid red;
  border-radius: 20em;
  display: inline;
  padding: 1em;
  position: absolute; /* 替换原relative属性 */
}

此方式下，所有圆形元素会基于#wrapper的左上角定位，完全脱离原文本流。

内容的提问来源于stack exchange，提问作者parsecer