确保相对定位的元素留在顶部容器内答案

【问题标题】：Ensure relatively positioned element stays inside of top container确保相对定位的元素留在顶部容器内
【发布时间】：2016-12-02 21:02:09
【问题描述】：

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

明确地说：我有一个相对于其父级定位的 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 的边界向左或向右移动？类似于max-left/max-right 的东西.

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

【问题讨论】：

标签： html css

【解决方案1】：

如果您决定将元素定位在精确位置 - 您不能说您希望将其定位在某个位置。您可以使用右边距/左边距（或带有百分比的位置）。

另一个选项是使用overflow 选项来设置容器上的滚动条（或者指定如果元素离开它的容器，它应该被隐藏）：

.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%;
}

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

【讨论】：