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

Question

当我将完整 (100%) width 内容即 carousel-indicators （在下面的代码中）放入另一个 div 即 wpr 并删除 padding（设置为0），为什么里面的内容还是超出了外面的div。我可以观察如果我删除内部 div 的 absolute position 即 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

默认 ol/ul 标签占用一些 margin & padding。您可以删除它以解决您的问题。 & 添加 position: relative; 到 .wpr div。检查下面更新的代码段

.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>

Answer 2

您需要向父元素声明 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>

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

Absolute positioned inner content goes beyond the outer boundary on width of 100%

html

css

css-position

absolute

carousel