Why does a parent element disappears when its child element is set to `position: absolute`?

* {
  margin: 0px;
  padding: 0px;
  font-family: "Poppins", sans-serif;
}

.main_box{
    background-image: url(images/photo.jpg);
    background-size: cover;
    height: 100vh;
}

.btn_one{
    color: white;
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    left: 16px;
    line-height: 60px;
}

.sidebar_menu{
    position: fixed;
    /* left: -350px; */
    height: 100vh;
    width: 300px;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.sidebar_menu .logo{
    position: absolute;
    width: 100%;
    line-height: 60px;
    top: 1px;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

.sidebar_menu .logo a {
    position: absolute;
    left: 30px;
    color: white;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Mini Project</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
  </head>
  <body>
    <div class="main_box">
      <input type="checkbox" id="check" />
      <div class="btn_one">
        <label for="check">
          <i class="fa-solid fa-bars"></i>
        </label>
      </div>

      <div class="sidebar_menu">
        <div class="logo">
          <a href="#">I am Groot</a>
        </div>

        <div class="btn_two">
          <label for="check" style="color: grey">
            <i class="fa-solid fa-xmark"></i>
          </label>
        </div>

        <div class="menu">
          <ul>
            <li>
              <i class="fa-solid fa-image"></i>
              <a href="#">Gallery</a>
            </li>
            <li>
              <i class="fa-solid fa-arrow-up-right-from-square"></i>
              <a href="#">Shortcuts</a>
            </li>
            <li>
              <i class="fa-solid fa-photo-film"></i>
              <a href="#">Exhibits</a>
            </li>
            <li>
              <i class="fa-solid fa-calendar-days"></i>
              <a href="#">Events</a>
            </li>
            <li>
              <i class="fa-solid fa-store"></i>
              <a href="#">Store</a>
            </li>
            <li>
              <i class="fa-solid fa-phone"></i>
              <a href="#">Contact</a>
            </li>
            <li>
              <i class="fa-regular fa-comments"></i>
              <a href="#">Feedback</a>
            </li>
          </ul>
        </div>

        <div class="social_media">
          <ul>
            <a href="#"><i class="fa-brands fa-facebook"></i></a>
            <a href="#"><i class="fa-brands fa-twitter"></i></a>
            <a href="#"><i class="fa-brands fa-instagram"></i></a>
            <a href="#"><i class="fa-brands fa-youtube"></i></a>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

In the above CSS code, when I apply position: absolute to the <a> in the .logo the div with class="logo" disappears. Technically its width is set to 0px. And when I comment out the position: absolute part, the div is visible again, occupying 100% width of the parent element.

I have tried searching on various platforms for the solution but couldn't find one that solves my query.

When I inspect the code, the text is visible in both the scenarios, but the div with class="logo" is visible as a box only when the position: absolute is not applied on the <a> tag. As soon as the position: absolute is applied, that box disappears. And upon inspecting, it shows that the div's width becomes 0px.

Can someone please explain why is this happening?

Thank you

Solution

It is the <div>'s height that goes to 0, not it's width as you say.

A <div> with nothing it and no specified height, will have a height of 0. When you put the <a> inside the <div> the <div> takes on a height that makes room for the <a>. When the <a> is positioned absolutely, it removes it from the normal flow of the document, so you essentially remove it from the <div>, whose height then returns to 0.