Assistance on CSS Visual design

Hi everyone, I have got a problem while playing around with one of the exercises in the curriculum.

According to my understanding, the position of the back division is fixed, meaning it is excluded from normal flow. Therefore, I expected to have the word “Star” at the top of my page. However, I cannot have the word shown no matter I place it before or after the back division. Meanwhile, the two twinkle stars are still there, and I can see the spacing after inserting the “Star”. Can someone please explain to me what’s happening here? Thanks!!

  <style>

  #back {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(white, #000099,         #66c2ff, #ffcccc, #ffeee6);
  }

  .stars {
    background-color: white;
    height: 30px;
    width: 30px;
    border-radius: 0%;
    animation-iteration-count: infinite;
  }

  .star-1 {
    animation-name: twinkle-1;
    animation-duration: 1s;
  }

  .star-2 {
    animation-name: twinkle-2;
    animation-duration: 1s;
  }

  @keyframes twinkle-1 {
    50% {
      transform: scale(0.5);
      opacity: 0.5;
    }
  }

  @keyframes twinkle-2 {
    50% {
      transform: scale(0.5);
      opacity: 0.5;
    }
  }

</style>

<body>

  <div id="back"></div>
  <h1 style="color:red">star</h1>
  <div class="star-1 stars"></div>
  <div class="star-2 stars"></div>
  
</body>

The article below on default stacking behavior might help. Bottom line: elements that have position explicitly set (such as your #back) will be stacked on top of elements that don’t, regardless of where the HTML is. So, you can add a position to your h1 or you can make some manual adjustments with z-index to control how things stack.

You could also try styling the body to make your background rather than using a div element, since the body, by default, is stacked below other things. I hope that helps!

It helps a lot! I got it now, thank you =)

1 Like