确保相对定位的元件保持在顶部容器内

Question

相对和绝对定位是很好的工具，但是它们会从流程中取出元素，这会导致它们的使用受到一些限制。我想我刚遇到其中一个，但我很想有人证明我错了。

要清楚说明：我有一个相对于其父母的div。问题是，在某些条件下，这个流出元件可以比顶部元件（例如主体）更远并且添加水平滚动条。演示如下：

.top-container {
  width: 80%;
  height: 100px;
  margin: auto;
  border: dashed 2px red;
}
.container {
  width: 80%;
  height: 50px;
  margin: 25px auto;
  border: dotted 1px blue;
  
  position: relative;
}
.absolute {
  width: 100%;
  background-color: black;
  color: white;
  
  position: absolute;
  top: 30%;
  right: -50%;
}

<div class="top-container">
  <div class="container">
    <div class="absolute">
      absolutely
    </div>
  </div>
</div>

我的问题是：有没有办法告诉CSS绝对定位的元素不应该比.top-container的边界更左或右？某些行为就像某种{ {1}}。

（例如，在我的例子中，移动黑色div，使其不会超出红色虚线）

Answer 1

如果您决定将元素置于完全位置 - 您不能说它希望它位于某个位置。您可以使用右/左边距（或百分比位置）。

另一种选择是使用overflow选项在容器上设置滚动条（或者指定如果元素从它的容器中取出它应该被隐藏）：

＆＃13;

＆＃13;

.top-container {
  width: 80%;
  height: 100px;
  margin: auto;
  border: dashed 2px red;
}
.container {
  width: 80%;
  height: 50px;
  margin: 25px auto;
  border: dotted 1px blue;
  
  position: relative;
  overflow: auto;
}
.hidden-overflow {
  overflow: hidden;
}
.absolute {
  width: 100%;
  background-color: black;
  color: white;
  
  position: absolute;
  top: 30%;
  right: -50%;
}

＆＃13;

<div class="top-container">
  <div class="container">
    <div class="absolute">
      absolutely
    </div>
  </div>
</div>

<div class="top-container">
  <div class="container hidden-overflow">
    <div class="absolute">
      absolutely
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;