Learn Responsive Web Design by Building a Piano - Step 24

HTML-CSS
1

Tell us what’s happening:

In the “#piano” section of my CSS there is a “position” property set to the value of “relative”. I have a doubt that why can’t I use “absolute” if I can use “absolute” what is the advantage of using “relative” here. And also How can i get know that to which condition I should use relative or absolute values?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Piano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <div id="piano">
      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
      <div class="keys">
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
      </div>
    </div>
  </body>
</html>

/* file: styles.css */
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}


/* User Editable Region */

#piano {
  background-color: #00471b;
  width: 992px;
  height: 290px;
  margin: 80px auto;
  padding: 90px 20px 0 20px;
  position: relative;
}

/* User Editable Region */


.keys {
  background-color: #040404;
  width: 949px;
  height: 180px;
  padding-left: 2px;
}

.key {
  background-color: #ffffff;
  position: relative;
  width: 41px;
  height: 175px;
  margin: 2px;
  float: left;
}

.key.black--key::after {
  background-color: #1d1e22;
  content: "";
  position: absolute;
  left: -18px;
  width: 32px;
  height: 100px;
}

.logo {
  width: 200px;
  position: absolute;
  top: 23px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Challenge Information:

Learn Responsive Web Design by Building a Piano - Step 24

2

the word ‘absolute’ is in reference usually to an absolute position (in the parent element’s area). That position never changes.
the word ‘relative’ is in reference to setting a position relative to the position the element would normally have occupied.

So if you have an element that is in a certain position normally, and you need to shift it in relation to that, use relative.
But if you want to set an absolute position for the element because no matter what, it will always be in that spot, then use absolute.

As you create your own projects, you will find uses for both of these. (do you want to move something slightly from where it normally belongs? or do you want to specify exactly where that thing goes so that it never changes no matter what elements get added or removed from the container/parent element?)

2 Likes
3

Thank You so much. I like the way you gave me explanation you made me clear . Thank you. Actually, I want to know the difference between them an many other CSS properties. Loved your explanation thank you once again.

2 Likes