Css 位置：绝对值导致页面溢出

简言之，问题是：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>

.内容{
高度：300px；
宽度：300px；
背景：蓝色；
位置：相对位置；
}
.装饰{
高度：10px；
宽度：10px；
背景：绿色；
位置：绝对位置；
底部：-5px；
}

如果我将窗口调整到滚动条出现的位置，那么我将

.decoration

类设置为

底部：0滚动条消失。
我期望页面在计算页面大小时忽略位置绝对元素，因为它们不应该占用任何空间。
因此，当窗户收缩时，它应该只显示一半的装饰。
这是虫子吗？有没有已知的解决方案

编辑：它似乎只发生在
底部
和
右侧
定位
您确定问题出在装饰中吗？
如果您有一个固定大小的容器，请检查是否要将窗口大小调整为小于300x300px

无论如何，您可以尝试使用
框大小：边框框作为属性，最终将div的每个边距/填充计算为各自的大小

编辑好的，我注意到如果你固定了div的位置，你就不会得到滚动条。这是密码笔：

我添加了一个容器，我试图以另一种方式实现。无论如何，如果您选择position:fixed并希望将div居中，您可以使用带有“left:50%”和“top:50%”的“transform:translate”，就像我在代码笔中所做的那样。
DOM流忽略绝对定位的元素。整个页面占用的空间与DOM流不同

换句话说：浏览器将试图使访问者能够在视口之外查看内容，即使内容是绝对定位的或固定的

当您将视口中的任何内容“关闭”到右侧或底部时，都应该出现滚动条。将内容放在页面左侧不会产生滚动条，这是下拉导航等常用技巧

您的原始示例：


.content{
高度：300px；
宽度：300px；
背景：蓝色；
位置：相对位置；
}
.装饰{
高度：10px；
宽度：10px；
背景：绿色；
位置：绝对位置；
底部：-10px；
}

实际上这是溢出，与大小计算无关。。。添加溢出：隐藏到
.content
，溢出将被隐藏。。。即使元素超出正常流量，在计算溢出时仍然会考虑它们，即使不考虑计算大小
编辑：它似乎只发生在底部和右侧定位上
-->这也是出于设计，只有右侧底部溢出可见，另一个现在你说的“打开窗口”是什么意思？我的意思是，@RemotH，在调整窗口大小时检查窗口是否小于300x300px，并获取滚动条。它是。我希望是这样。那样的话我该怎么办？我特别希望忽略绝对元素的位置。你能更准确地解释一下，你想实现什么？如果你不需要滚动页面（如果页面是静态的，并且你有适合屏幕的静态大小的元素），你可以尝试将“溢出：隐藏”设为主体。不管怎么说，用一支手笔/小提琴来看看发生了什么会更好地理解。左
的目的是什么：-999em？使用“display:none；”不是更好吗？我过分简化了我的问题，以集中在有问题的部分，但我会编辑它，使其更具体。以下是我对问题的补充：A.现在的位置是底部：-5px B。“因此，当窗口收缩时，它应该只显示一半的装饰。”无论放在何处。您可以将其放置在底部-5px或-5000px，浏览器视口将确保显示它。这不是虫子，是故意的。至于
左侧：-999em
-主要用于屏幕阅读器，但也可能有其他原因：
.container {
  height: 300px;
  width: 300px;
  margin: auto;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
}