Building a Penguin: Step 11

Hello.

I have a question concerning Step 11 of ‘Learn CSS Transforms by Building a Penguin.’

I was wondering why div.penguin would push div.ground down when given a width and height, even though div.ground has a position of ‘absolute.’

According to MDN,

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top , right , bottom , and left .

Thus, from my understanding, the div.ground should be positioned relative to the html element, which is its initial containing block. I would assume that div.ground should stay at top: 0, left: 0 because it is removed from the normal document flow, and surrounding elements shouldn’t affect its position. However, since it is not, I was wondering why.

Here is the HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Penguin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>

  <body>
    <div class="penguin"></div>
    <div class="ground"></div>
  </body>
  
</html>

Here is the CSS:

body {
  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow: clip;
}

.penguin {
  width: 300px;
  height: 300px;
}

.ground {
  width: 100vw;
  height: 400px;
  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
  z-index: 3;
  position: absolute;
}

As always, thank you! Help is much appreciated:)

But did you actually set top: 0 and left: 0 on div.ground? These values aren’t 0 by default. You have to set them. If you don’t then the element sort of stays where it would normally be. Go ahead and try setting top: 0 on div.ground and see what happens.

I looked ahead to the last step and you will actually never set any positioning coordinates on div.ground (although you will use margin-top to push it up a little). It looks like the main reason for using position: absolute is so you can use z-index on it. But you can do this with position: relative as well, which is probably what should have been used here because I think it makes the intent a little clearer.

By the way, this is a very good question and shows that you are really trying to understand how things work. Keep up the good work.

Hey @bbsmooth, thank you again for the detailed answer! I greatly appreciate the help.

And yes, I did try top: 0 and left: 0 for div.ground and knew that worked. I was more so wondering what the initial (default) top, right, bottom, and left values are for absolutely positioned elements. I see that I was wrong in assuming the default values of top and left would be 0! (Lessoned learned: Don’t assume things! Haha.)

As you clarified, the default values for top, right, bottom, and left are auto, and this means that the absolutely positioned div.ground would behave as if it were statically positioned, which makes sense why div.ground would be pushed downwards by div.penguin. I hope I’ve got it right.

These two article/posts explicitly state that default is auto (hope they’re reliable sources):

https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning?source=post_page---------------------------

I haven’t reached the last step yet, but I agree with your point that using position: relative would have been less confusing, because I’d imagine that one would use position: absolute with an intention of taking the element out of the normal flow, which this exercise does not.

Thanks again!