绝对定位的内部内容物超出宽度为 100% 的外部边界

Question

当我放置完整的(100%(width内容时，即carousel-indicators(在下面的代码中(在另一个div内，即wpr去掉padding(设置为0(，为什么内部内容仍然超出外部div。我可以观察我是否去除了内div的absoluteposition，即carousel-indicators，它按预期工作。谁能解释一下为什么绝对定位会搞砸？

.wpr {
padding: 0;
width: 100%;
}
.wpr-item {
width: 300px;
background: pink;
padding: 10px 30px;
display: flex;
justify-content: center;
margin: 0 auto;
}
.wpr-item .item {
width: 50px;
height: 50px;
background: green;
float: left;
margin: 0 5px;
}
.carousel-indicators {
position: absolute;
padding: 0;
text-align: center;
/*width: 97%;*/
display: block;
width: 100%;
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
background-color: black;
background-color: rgba(0, 0, 0, 0);
border: 1px solid black;
border-radius: 10px;
}
.carousel-indicators .active {
width: 12px;
height: 12px;
margin: 0;
background-color: black;
}

<div class="wpr">
<div class="wpr-item">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<ol class="carousel-indicators">
<li class="active"></li>
<li></li>
<li></li>
</ol>
</div>

Answer 1

您需要声明对父元素的position: relative，在本例中为.wpr，以便定位absolute元素具有对给定父元素的relative引用。

.wpr {
padding: 0;
width: 100%;
position: relative;
}
.wpr-item {
width: 300px;
background: pink;
padding: 10px 30px;
display: flex;
justify-content: center;
margin: 0 auto;
}
.wpr-item .item {
width: 50px;
height: 50px;
background: green;
float: left;
margin: 0 5px;
}
.carousel-indicators {
position: absolute;
padding: 0;
text-align: center;
/*width: 97%;*/
display: block;
width: 100%;
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
background-color: black;
background-color: rgba(0, 0, 0, 0);
border: 1px solid black;
border-radius: 10px;
}
.carousel-indicators .active {
width: 12px;
height: 12px;
margin: 0;
background-color: black;
}

<div class="wpr">
<div class="wpr-item">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<ol class="carousel-indicators">
<li class="active"></li>
<li></li>
<li></li>
</ol>
</div>

Answer 2

默认情况下ol/ul标签需要一些margin & padding。您可以删除它以解决您的问题。并将position: relative;添加到.wpr部门检查下面的更新片段

.wpr {
padding: 0;
width: 100%;
position: relative;
}
.wpr-item {
width: 300px;
background: pink;
padding: 10px 30px;
display: flex;
justify-content: center;
margin: 0 auto;
}
.wpr-item .item {
width: 50px;
height: 50px;
background: green;
float: left;
margin: 0 5px;
}
.carousel-indicators {
position: absolute;
padding: 0;
margin: 0;
text-align: center;
/*width: 97%;*/
display: block;
width: 100%;
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
background-color: black;
background-color: rgba(0, 0, 0, 0);
border: 1px solid black;
border-radius: 10px;
}
.carousel-indicators .active {
width: 12px;
height: 12px;
margin: 0;
background-color: black;
}

<div class="wpr">
<div class="wpr-item">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<ol class="carousel-indicators">
<li class="active"></li>
<li></li>
<li></li>
</ol>
</div>