Question

简而言之，当我将页面缩小到超过蓝色矩形+绿色矩形的尺寸时，codepen.io / anon / pen / OBRoNW会缩小页面，底部向下推动页面，右侧向右推动页面右侧，以便出现滚动条。在位置：绝对元素上，我该如何防止推挤？另外，如果可能的话，我该如何做相反的操作并将推压应用于左上角的项目？

问题本身（尚未完全理解，因此我在顶部添加了一个更简单的问题）：当我使用绝对位置时，涉及页面正文时，元素仍会占用空间。例如：

  <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;，滚动条就会消失。我期望的行为是页面在计算页面大小时忽略位置绝对元素，因为它们不应该占用任何空间。因此，当窗口缩小时，它应仅显示装饰的一半。这是错误吗？有已知的解决方案吗？

编辑：它似乎仅在bottom和right定位上发生

Answer 1

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

采用另一种方式：浏览器将尝试使访问者能够查看视口之外的内容，即使其位置是绝对的还是固定的。

在将视口“偏离”右侧或底部的任何位置时，都应该期望有滚动条。将内容放在页面的左侧一侧不会导致滚动条，并且是下拉导航之类的常用技巧。

您的原始示例：

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

Answer 2

您确定问题出在.decoration吗？您有一个固定尺寸的容器，请检查是否要将窗口的尺寸调整为小于300x300px。

无论如何，您都可以尝试使用box-sizing: border-box;作为属性来最终将div的每个边距/边距计算为其各自的大小。

编辑好的，我注意到，如果您固定div的位置，则不会获得滚动条。这是代码库：codepen example

.container {
  height: 300px;
  width: 300px;
  margin: auto;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
}

我添加了一个容器，我试图通过另一种方式来实现。无论如何，如果您选择position：fixed并想将div居中，则可以像在Codepen中一样使用“ transform：translate”，“ left：50％”和“ top：50％”。

位置：绝对会导致页面溢出

2 个答案: