Learn CSS Transforms by Building a Penguin - Step 15

HTML-CSS
1

Tell us what’s happening:

Why does the .left-mountain top position goes down to 75px (.penguin margin-top value) after adding position:absolute?
This question has already been asked twice:

and /582436
But no-one answered…
After some googling, the answer is “Collapsing Margins”:

  • child .penguin margin-top > parent body margin
    → parent body position goes down to 75px
    → child .left-mountain absolute top position becomes 75px

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  
  <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="left-mountain"></div>
    <div class="penguin"></div>
    <div class="ground"></div>
  </body>
</html>

/* file: styles.css */
body {
  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
  padding: 0;
  width: 100%;
  height: 100vh;
}


/* User Editable Region */

.left-mountain {
  width: 300px;
  height: 300px;
  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
  position: absolut; /* error on purpose to be able to post to the forum, I know that there is a typo, and that it should be "position: absolute;" */
}

/* User Editable Region */


.penguin {
  width: 300px;
  height: 300px;
  margin: auto;
  margin-top: 75px;
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0

Challenge Information:

Learn CSS Transforms by Building a Penguin - Step 15

2

Hi there. If you just wanted to answer the question, it may have been better to respond to the original thread?

3

Both threads are closed.
I see that you also participated in one of those threads:

If you can update your answer in that thread, we can of course delete this topic.

4

Then it doesn’t really help now to write this answer? No one will find it I guess.

(I would not update an answer I gave since that would serve no purpose for that OP or that thread as far as I can see).

We don’t usually allow people to write posts on the forum that are not about a question they have in this category you picked to post in, so pls keep that in mind for the future. You can use an external website to write your thoughts on these exercises if you wish but in general we tend to unlist and close “article or blog” type posts.

5

I had the same question as those 2 peoples.

  • I 1st tried the Read-Search-Ask method, but honestly, this collapsing margin concept is pretty advanced and did not come up in any exercises until now.
  • I then searched for similar questions that have already been answered on the forum
    And I did find those 2 threads, but with no answer. To be honest, I saw your answer and realized that u did not understand the question at the time.

I then went back to the Read-Search-Ask method and looked for the answer myself, which took me a while since I have no prior knowledge in CSS and had absolutely no idea that the concept of collapsing margins even existed.

Finally, after finding the answer, I took the time to post it here, not for me, but for the next person who get confused as to why this .left-mountain div is not in the top-left corner of the body after adding position:absolute.
It does not matter to me nor to the person who posted this question almost 2 year ago if you update your answer. It matters to the next person.

But I will keep in mind for the future that if I have the same questions as others about a problem that has been asked in this forum and that no-one could answer in a 6 months period, then I should just stay quiet :+1: