Step 26 building a penguin

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 ?

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="./styles.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <div class="left-mountain"></div>
  <div class="back-mountain"></div>
  <div class="sun"></div>
  <div class="penguin"></div>
  <div class="ground"></div>
/* 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/ Safari/537.36

Challenge: Step 26

Link to the challenge:

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

Thank you for your help.