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

【问题标题】：Why the bottom of the page is not cropping my absolute positioned element为什么页面底部没有裁剪我的绝对定位元素
【发布时间】：2020-06-06 00:36:39
【问题描述】：

我有两个<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;
}

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

【问题讨论】：

这就是 absolute 的工作方式，因此它按预期工作。如果页面不够长，JavaScript 可能需要隐藏它？我假设您不想禁用滚动。
是的，您的 css 正在按预期工作 - .bg_gradient.last 是 1000x1000 像素，并且移动了 400 像素。仅仅因为它被绝对定位并不意味着它不会导致溢出。
如果不希望页面显示第二个元素，将 max-width 设置为 body 并设置 overflow: hidden?但这是一种奇怪的做法。您的问题的答案仍然是：因为它不应该“裁剪”。
Ohhhh...我不知道@Mahatmasamatman 我认为如果绝对定位它不会导致溢出。我找到了解决方法:)
很高兴您找到了解决方案 :)

标签： html css css-position absolute

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

仅仅因为一个元素是绝对定位的，并不意味着父容器不会拉伸以容纳它。 - @Mahatmasamatman

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

【讨论】：