Step 26 building a penguin

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
can someone tell me when I just set the position;absolute without setting any position value like top, left,… the sun somehow still moves ?

image
image1920×1080 477 KB 

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" 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="back-mountain"></div>
  <div class="sun"></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));
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
overflow: clip;
}

.left-mountain {
width: 300px;
height: 300px;
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
position: absolute;
transform: skew(0deg, 44deg);
z-index: 2;
margin-top: 100px;
}

.back-mountain {
width: 300px;
height: 300px;
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
position: absolute;
z-index: 1;
transform: rotate(45deg);
left: 110px;
top: 225px;
}

.sun {

}

.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;
margin-top: -58px;
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Challenge: Step 26

Link to the challenge:

2

Hi @ vuongtritung

I’ve linked (below) to an FCC article that has some helpful explanations about CSS absolute and relative positioning.

Here’s an extract:

Absolute-positioned elements are completely taken out of the regular flow of the web page.
They are not positioned based on their usual place in the document flow, but based on the position of their ancestor.

1 Like
3

Thank you for your help.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.