为什么页面底部没有裁剪我的绝对定位元素

Question

我有两个 <div> 和 position: absolute。一个在页面顶部，另一个在页面底部。页面底部的元素低于最后一个元素（页脚）。我的问题是，即使我的 <div> 在 position: absolute 中并且应该从流程中删除，我的页面也会扩展以适应 <div> 即 "overflowing"。如何让页面裁剪超出页脚的所有内容？

我要说的是：

body{
  position: relative;
}

p{
  width: 80%;
  font-size: 50px;
  margin: 0;
}

footer{
  margin-top: 200px;
  position: relative;
}

.bg_gradient.first{
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 1000px;
  
  transform: translate(-400px, -400px);
  
  background: radial-gradient(circle, rgba(254,73,70,1) 0%, rgba(254,73,70,0) 70%);
  z-index: -1;
}

.bg_gradient.last{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1000px;
  height: 1000px;
  
  transform: translate(-400px, 400px);
  
  background: radial-gradient(circle, rgba(254,73,70,1) 0%, rgba(254,73,70,0) 70%);
  z-index: -1;
}

<body>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum voluptas incidunt nulla necessitatibus rerum illum provident ea earum neque officia nam deserunt animi nostrum iusto velit distinctio, dolor eveniet voluptates.</p>
  
  <div class="bg_gradient first"></div>
  
  <div class="bg_gradient last"></div>
  
  <footer>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere eligendi maiores dolore mollitia animi a fugit saepe perferendis unde, sequi debitis sint ratione, recusandae tempora quis culpa vitae sed assumenda!</p>
  </footer>
</body>

Answer 1

为什么页面底部没有裁剪我的绝对定位元素

它不应该被裁剪。这就是它应该如何工作的。仅仅因为元素是绝对定位的，并不意味着父容器不会拉伸以容纳它。

Answer 2

感谢@Mahatmasamatman，这是正常行为。

Just because an element is absolutely positioned, does not mean the parent container won't stretch to accommodate it. - @Mahatmasamatman

我的解决方案是创建一个 div，它的宽度和高度与我的 body 和 position: absolute 相同，并设置 overflow: hidden 这样我就会得到我的行为通缉。这是 jsfiddle with the solution

为什么页面底部没有裁剪我的绝对定位元素

Why the bottom of the page is not cropping my absolute positioned element

html

css

css-position

absolute