小编Thi*_*tre的帖子

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

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

这就是我要说的：

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

Run Code Online (Sandbox Code Playgroud)