Learn Responsive Web Design by Building a Piano - Step 16

Tell us what’s happening:
i am confuse with this two idea:
position: absolute and position: relative.

while i am running the code of position: absolute
the consoler present only one box.
while i change my code to position: relative.
consoler present the those 21

horizontally.

i dont know why position: absolute does not work . i understanding is that position: absolute will change the position to one place. therefore those 21

are compact into the same area. so visually, there are one box present on the screen only. but position: relative make the 21
start relocateing at the same place, which
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">
    <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 */
.key {
  background-color: #ff33ff;
width: 41px;
height: 175px;
position: relative;
}
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Learn Responsive Web Design by Building a Piano - Step 16

Link to the challenge:

lol I’m having the same thinking right now, in addition :
why does float property works while in the previous chapter of Picasso painting we used “inline-block”, this the last property gave me the 21 key with a large padding between the keys which caused the keys to continue to another block.

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