Adding an element makes next div disappear

Issue

I am trying to create a christmas tree for practice. It works well, but if i add any elements other than plain text before the tree div, the tree disappears and only the star remains.

html,
body {
  height: 100vh;
  width: 100vw;
  background-color: #01002b;
}

@keyframes loadIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@keyframes Blink1 {
  from {
    filter: brightness(80%);
  }
  50% {
    filter: brightness(150%);
  }
  to {
    filter: brightness(80%);
  }
}

@keyframes Blink2 {
  from {
    filter: brightness(150%);
  }
  50% {
    filter: brightness(80%);
  }
  to {
    filter: brightness(150%);
  }
}

@keyframes BlinkStar {
  from {
    fill: #4d4500;
  }
  50% {
    fill: #ffe600;
  }
  to {
    fill: #4d4500;
  }
}

.tree {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  animation: loadIn 2s;
  transform-origin: bottom;
}

.tree:first-child {
  height: 400px;
  width: 325px;
}

.star {
  width: 15%;
  top: 3%;
  margin-bottom: 0;
  animation: BlinkStar 2s infinite;
}

.ball {
  height: 10px;
  width: 10px;
  background-color: #555;
  border-radius: 50%;
  position: absolute;
  transform: scale(0);
}

.ball:nth-child(even) {
  animation: Blink1 .5s infinite;
}

.ball:nth-child(odd) {
  animation: Blink2 .5s infinite;
}

.leaves {
  width: 100%;
  flex: 3;
  margin-top: 0;
}

.leaves .leaf {
  background-color: #555;
  height: 33%;
  margin: auto;
  position: relative;
  border-radius: 15px;
}

.s {
  width: 30%;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}

.m,
.l,
.xl {
  clip-path: polygon(5% 100%, 30% 0%, 70% 0%, 95% 100%);
}

.m {
  width: 45%;
}

.l {
  width: 60%;
}

.xl {
  width: 75%;
}

.wood {
  flex: 2;
  background-image: linear-gradient(to right, #5c360e, #754613);
  width: 20%;
}

<div class="tree">
  <div class="star">
    <svg viewBox="0 0 358.966 358.966">
                    <g>
                    <path d="M358.966,143.652c0-11.38-9.047-20.582-20.183-20.582c-0.301,0-0.602,0.024-0.894,0.041
                    l-0.154-0.569H232.323l-30.076-92.544l-0.268-0.016c-0.293-12.404-10.234-22.419-22.5-22.419c-12.03,0-21.817,9.616-22.459,21.736
                    h-0.081l-30.311,93.243H25.247c-1.13-0.179-2.276-0.301-3.471-0.301C9.754,122.242,0,132.175,0,144.449
                    c0,9.673,6.088,17.875,14.55,20.923l79.424,57.697l-31.986,98.47l0.602,0.447c-0.805,2.26-1.26,4.698-1.26,7.259
                    c0,11.811,9.397,21.386,20.996,21.386c5.064,0,9.714-1.845,13.347-4.91l0.236,0.195l83.562-60.72l84.854,61.655l0.406-0.276
                    c3.56,3.008,8.137,4.828,13.111,4.828c11.372,0,20.582-9.397,20.582-20.972c0-2.122-0.309-4.154-0.886-6.08l0.293-0.179
                    l-32.839-101.103l83.919-60.981l-0.171-0.553C354.845,157.975,358.966,151.293,358.966,143.652z"/>
                    </g>
                </svg>
  </div>
  <div class="leaves">
    <div class="leaf s">
      <div class="ball" style="left: 30%; bottom: 20%; transform: scale(2);"></div>
    </div>
    <div class="leaf m">
      <div class="ball" style="left: 30%; bottom: 20%; transform: scale(1.3);"></div>
      <div class="ball" style="right: 30%; top: 30%; transform: scale(1.8);"></div>
    </div>
    <div class="leaf l">
      <div class="ball" style="left: 30%; bottom: 25%; transform: scale(2);"></div>
      <div class="ball" style="right: 47%; top: 20%; transform: scale(1.5);"></div>
      <div class="ball" style="right: 20%; bottom: 18%; transform: scale(2.3);"></div>
    </div>
    <div class="leaf xl">
      <div class="ball" style="left: 30%; top: 30%; transform: scale(1.4);"></div>
      <div class="ball" style="left: 44%; bottom: 20%; transform: scale(1.8);"></div>
      <div class="ball" style="right: 37%; top: 20%; transform: scale(1.6);"></div>
      <div class="ball" style="right: 24%; bottom: 20%; transform: scale(2.1);"></div>
    </div>
  </div>
  <div class="wood"></div>
</div>

This code works well. But if you try adding a button element for example before the tree-class div, the tree disappears.

Solution

Wrap the tree class div inside a div.

The reason the tree disappears when you add a div at the beginning of the HTML before the div with the class "tree" is because the CSS styling for the tree is not applied to the element until the element is encountered in the DOM (Document Object Model). When you add a div at the beginning, the browser parses the HTML from top to bottom, and it finishes parsing the div before it reaches the div with the class "tree". As a result, the CSS styling for the tree is never applied, and the tree does not appear on the page.

<button> test </button>
<div>
<div class="tree">
  <div class="star">
    <svg viewBox="0 0 358.966 358.966">
                    <g>
                    <path d="M358.966,143.652c0-11.38-9.047-20.582-20.183-20.582c-0.301,0-0.602,0.024-0.894,0.041
                    l-0.154-0.569H232.323l-30.076-92.544l-0.268-0.016c-0.293-12.404-10.234-22.419-22.5-22.419c-12.03,0-21.817,9.616-22.459,21.736
                    h-0.081l-30.311,93.243H25.247c-1.13-0.179-2.276-0.301-3.471-0.301C9.754,122.242,0,132.175,0,144.449
                    c0,9.673,6.088,17.875,14.55,20.923l79.424,57.697l-31.986,98.47l0.602,0.447c-0.805,2.26-1.26,4.698-1.26,7.259
                    c0,11.811,9.397,21.386,20.996,21.386c5.064,0,9.714-1.845,13.347-4.91l0.236,0.195l83.562-60.72l84.854,61.655l0.406-0.276
                    c3.56,3.008,8.137,4.828,13.111,4.828c11.372,0,20.582-9.397,20.582-20.972c0-2.122-0.309-4.154-0.886-6.08l0.293-0.179
                    l-32.839-101.103l83.919-60.981l-0.171-0.553C354.845,157.975,358.966,151.293,358.966,143.652z"/>
                    </g>
                </svg>
  </div>

  <div class="leaves">
    <div class="leaf s">
      <div class="ball" style="left: 30%; bottom: 20%; transform: scale(2);"></div>
    </div>
    <div class="leaf m">
      <div class="ball" style="left: 30%; bottom: 20%; transform: scale(1.3);"></div>
      <div class="ball" style="right: 30%; top: 30%; transform: scale(1.8);"></div>
    </div>
    <div class="leaf l">
      <div class="ball" style="left: 30%; bottom: 25%; transform: scale(2);"></div>
      <div class="ball" style="right: 47%; top: 20%; transform: scale(1.5);"></div>
      <div class="ball" style="right: 20%; bottom: 18%; transform: scale(2.3);"></div>
    </div>
    <div class="leaf xl">
      <div class="ball" style="left: 30%; top: 30%; transform: scale(1.4);"></div>
      <div class="ball" style="left: 44%; bottom: 20%; transform: scale(1.8);"></div>
      <div class="ball" style="right: 37%; top: 20%; transform: scale(1.6);"></div>
      <div class="ball" style="right: 24%; bottom: 20%; transform: scale(2.1);"></div>
    </div>
  </div>
  <div class="wood"></div>
</div>
  </div>

Answered By - Ludovic Spina