css - 位置 : absolute causes overflow on the page

Question

简而言之，问题是:codepen.io/anon/pen/OBRoNW 当我将页面缩小到蓝色矩形+绿色矩形的大小时，底部的矩形将页面向下推，右侧的矩形将页面向下推页面向右移动，以便出现滚动条。当涉及到position:absolute元素时，如何防止推送？另外，如果可能的话，我该如何做相反的事情并将插入应用于左上角的元素？

问题本身(这还没有完全理解，所以我在顶部添加了更简单的问题): 当我使用绝对位置时，元素在页面主体中仍然占用空间。 例如:

  <div class="content">
    <div class="decoration">
    </div>
  </div>


<style>

.content{
  height:300px;
  width:300px;
  background:blue;
  position:relative;
}
.decoration{
  height:10px;
  width:10px;
  background:green;
  position:absolute;
  bottom:-5px;    
}

</style>

如果我将窗口大小调整到滚动条出现的位置，那么我将 .decoration 类设置为 bottom:0; 滚动条就会消失。 我期望的行为是页面在计算页面大小时忽略位置绝对元素，因为它们不应该占用任何空间。 因此，当窗口缩小时，它应该只显示一半的装饰。 这是一个错误吗？对此有已知的解决方案吗？

编辑:它似乎仅发生在底部和右定位

Answer 1

DOM 流忽略绝对定位的元素。整个页面占用的空间与 DOM 流不同。

换句话说:浏览器将尝试使访问者能够查看视口(viewport)之外的内容，即使它是绝对定位或固定的。

每当您将任何内容放置在视口(viewport)的右侧或底部“之外”时，您都应该期待滚动条。将内容放置在页面左侧之外不会导致滚动条，并且是下拉导航等内容的常用技巧。

您的原始示例:

.content {
  height: 300px;
  width: 300px;
  background: blue;
  position: relative;
}

.decoration {
  height: 10px;
  width: 10px;
  background: green;
  position: absolute;
  bottom: -10px;
}

<div class="content">
  <div class="decoration">
  </div>
</div>

左侧绝对定位示例:

.content {
  height: 300px;
  width: 300px;
  background: blue;
  position: relative;
}

.decoration {
  height: 10px;
  width: 10px;
  background: green;
  position: absolute;
  left: -999em;
}

<div class="content">
  <div class="decoration">
  </div>
</div>