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, andleft.
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:)