绝对定位的内部内容超出了宽度为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

您需要向父元素声明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目录(&A)。检查下面的更新代码段

​

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

​