绝对定位.line元素超出父容器：原因及修复方案求助

原代码 #

CSS代码 #

.row.justify-content-center div:last-child>div>div {
  display: none;
}

.line {
  width: 100%;
  height: 9px;
  margin-left: 16px;
  border-bottom: 2px solid lightgrey;
  position: absolute;
}

.circle {
  height: 16px;
  width: 16px;
  background-color: lightgrey;
  border-radius: 50%;
  display: inline-block;
}

HTML代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="align-text-center">
    <div class="row justify-content-center">
        <div class="col-1 text-center">
            <div id="step-1" class="circle">
                <div class="line"></div>
            </div>
            <div class="d-none d-md-block">
                <p class="small">Step 1</p>
            </div>
        </div>
        <div class="col-1 text-center">
            <div id="step-2" class="circle">
                <div class="line"></div>
            </div>
            <div class="d-none d-md-block">
                <p class="small">Step 2</p>
            </div>
        </div>
        <div class="col-1 text-center">
            <div id="step-3" class="circle">
                <div class="line"></div>
            </div>
            <div class="d-none d-md-block">
                <p class="small">Step 3</p>
            </div>
        </div>
    </div>
</div>

问题原因 #

• 定位基准错误：.line设置了position: absolute，但父元素.circle未设置position: relative，导致.line的定位参考对象是视口（或更高层级无定位的祖先），而非.circle，此时width:100%的计算基准不是父容器，自然会超出。
• 宽度计算溢出：即便定位基准正确，.line同时设置width:100%和margin-left:16px，总宽度会是父容器宽度+16px，直接超出父容器范围。小屏幕下col-1宽度大幅缩小，这个溢出问题会更突出。

修复方案 #

方案1：修正绝对定位逻辑 #

1. 给.circle添加相对定位，让.line以它为基准定位：

.circle {
  height: 16px;
  width: 16px;
  background-color: lightgrey;
  border-radius: 50%;
  display: inline-block;
  position: relative; /* 新增，设置定位基准 */
}

2. 调整.line的样式，去掉多余的margin，让连线从圆圈右侧延伸到下一个步骤的位置：

.line {
  height: 9px;
  border-bottom: 2px solid lightgrey;
  position: absolute;
  left: 100%; /* 从圆圈右侧开始 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 精准垂直居中 */
  width: calc(100vw / 12 - 16px); /* 匹配col-1的宽度，减去圆圈自身宽度 */
}

• 注：calc(100vw / 12 - 16px)是基于Bootstrap的12列网格，col-1占视口宽度的1/12，减去圆圈的16px宽度，刚好填满步骤间的空隙。

方案2：改用Flex布局重构（更推荐） #

放弃绝对定位，用Flex布局实现步骤和连线，响应式更友好：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="d-flex justify-content-center align-items-center">
    <!-- 步骤1 -->
    <div class="text-center">
        <div id="step-1" class="circle"></div>
        <div class="d-none d-md-block">
            <p class="small">Step 1</p>
        </div>
    </div>
    <!-- 连线1 -->
    <div class="flex-grow-1 mx-2 border-bottom border-lightgrey" style="height: 2px; align-self: center;"></div>
    <!-- 步骤2 -->
    <div class="text-center">
        <div id="step-2" class="circle"></div>
        <div class="d-none d-md-block">
            <p class="small">Step 2</p>
        </div>
    </div>
    <!-- 连线2 -->
    <div class="flex-grow-1 mx-2 border-bottom border-lightgrey" style="height: 2px; align-self: center;"></div>
    <!-- 步骤3 -->
    <div class="text-center">
        <div id="step-3" class="circle"></div>
        <div class="d-none d-md-block">
            <p class="small">Step 3</p>
        </div>
    </div>
</div>

.circle {
  height: 16px;
  width: 16px;
  background-color: lightgrey;
  border-radius: 50%;
  display: inline-block;
}

• 这种方式通过Flex的flex-grow-1让连线自动填充步骤间的空隙，无需计算宽度，在任何屏幕尺寸下都能自适应。

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