CODEWITHSUNDEEP
htmlcsscss-positionabsolute
Thierry Lemaitre
Thierry Lemaitre

Reputation: 166

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

I have two <div> with the position: absolute. One is at the top and the other is at the bottom the page. The one at the bottom of the page goes lower than the last element (footer). My problem is that even if my <div> is in position: absolute and should be removed from the flow, my page extends to fit the <div> that is "overflowing". How can I make the page crop everything that exceeds my footer?

Here's what I'm talking about:

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>

Upvotes: 4

Views: 646

Answers (2)

Thierry Lemaitre
Thierry Lemaitre

Reputation: 166

Thanks to @Mahatmasamatman, the things is this is the normal behavior.

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

My solution is to create a div that make the same width and height than my body with position: absolute and set overflow: hidden so I would get the behavior I wanted. Here's a jsfiddle with the solution

Upvotes: 2

Mahatmasamatman
Mahatmasamatman

Reputation: 1535

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

It's not supposed to be cropping it. That's how it is supposed to work. Just because an element is absolutely positioned, does not mean the parent container won't stretch to accommodate it.

Upvotes: 5

Related Questions