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: