Position: Absolute Exercise Piano Player: Don't Understand Element's Placement

Web Development Front-End
1

Elements w/ class “black-key” are positioned absolutely.
Why do they seem to position themselves next to a sibling section element, key?

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <p class='title'>Piano Player</p>
  <p id='demo'>Follow the song below to play  the piano.</p>
  <section class="piano">
    <section id='c-key' class="key">
      <section class='keynote'>C</section>
    
</section>
    <section id='c-sharp-key' class="black-key">
      <section class='black-keynote'>C#</section>
    </section>
    <section id='d-key' class="key">
      <section class='keynote'>D</section>
    </section>
    <section id='d-sharp-key' class="black-key">
      <section class='black-keynote'>D#</section>
    </section>
    <section id='e-key' class="key">
      <section class='keynote'>E</section>
    </section>
    <section id='f-key' class="key">
      <section class='keynote'>F</section>
    </section>
    <section id='f-sharp-key' class="black-key">
      <section class='black-keynote'>F#</section>
    </section>
    <section id='g-key' class="key">
      <section class='keynote'>G</section>
    </section>
    <section id='g-sharp-key' class="black-key">
      <section class='black-keynote'>G#</section>
    </section>
    <section id='a-key' class="key">
      <section class='keynote'>A</section>
    </section>
    <section id='a-sharp-key' class="black-key">
      <section class='black-keynote'>A#</section>
    </section>
    <section id='b-key' class="key">
      <section class='keynote'>B</section>
    </section>
    <section id='high-c-key' class="key">
      <div class='keynote'>C</div>
    </section>
  </section>
</body>
</html>

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: #ffc63f;
  }
  .title{
    font-size: 36px;
    margin-top: 10px;
    margin-bottom: 0px;
    padding: 0;
    color: #141c3a;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
  }
  #demo{
    text-align: center;
    font-size: 18px;
    margin-top: 15px;
    color: #141c3a;
    letter-spacing: 1px;
    font-style: italic;
  }
  .piano{
    width: 305px;
    height: 210px;
    display: block;
    margin: 0 auto;
    background-color: #fd4d3f;
    margin-top: 30px;
  }
  .key{
    width: 30px;
    height: 200px;
    display: inline-block;
    border: solid #141c3a 2px;
    box-shadow: 2px 5px;
    background-color: white;
    color: #141c3a;
  }
  .black-key{
    width: 25px;
    height: 100px;
    display: inline-block;
    background-color: #141c3a;
    color: white;
    position: absolute;
    margin-left: -12px;
    padding: 0px;
  }
  .keynote{
    width: 20px;
    height: 20px;
    text-align: center;
    display: block;
    margin: 0 auto;
    margin-top: 175px;
    color: #141c3a;
  }
  .black-keynote{
    width: 20px;
    height: 20px;
    text-align: center;
    display: block;
    margin: 0 auto;
    margin-top: 75px;
  }
1 Like