背景に設置した星を一番後ろに表示させる方法

Question

前提

[こちらのサイト](https://web-dev.tech/front-end/javascript/twinkle-stars-effect/
を使用して背景に星を設置しました。
こちらのサイトのDEMOでは分かりづらいのですが、星部分を黄色に変更し、尚且つ星を大きくすると他の要素に被って一番前に星が表示されているようになりました。
変えた箇所は星の数、色、大きさのみです。

実現したいこと

<div class="stars"> <div class="information"> <h1>title</h1> <img src="/test.jpeg"> <div class="tab"> タブの中身 </div> </div> </div>

とした場合、h1とimg、tabの下に表示されるようにしたいです。

発生している問題・エラーメッセージ

分かりづらくてすみません、このような状態で上に被さります。

該当のソースコード

<div class="stars">
  <h1>title</h1>
  <img src="/test.jpeg">
  <div class="tab">
   タブの中身
  </div>
</div>

.stars {
  position: relative;
  background-image: linear-gradient(0deg, #000, #000, #000);
  overflow: hidden; 
}


.star {
  position: absolute;
  display: block;
  background-color: #ffe600; 
  border-radius: 50%;
  box-shadow: 0 0 4px 2px rgba(#fff, 0.2);
  opacity: 0;
  animation: twinkle 5s infinite;
}

@keyframes twinkle {
  0% {
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

window.addEventListener("DOMContentLoaded", () => {
  const stars = document.querySelector(".stars");

  const createStar = () => {
    const starEl = document.createElement("span");
    starEl.className = "star";
    const minSize = 3;
    const maxSize = 7;
    const size = Math.random() * (maxSize - minSize) + minSize;
    starEl.style.width = `${size}px`;
    starEl.style.height = `${size}px`;
    starEl.style.left = `${Math.random() * 100}%`;
    starEl.style.top = `${Math.random() * 100}%`;
    starEl.style.animationDelay = `${Math.random() * 10}s`;
    stars.appendChild(starEl);
  };

  for (let i = 0; i <= 200; i++) {
    createStar();
  }
});

試したこと

あらゆるところにpositionとz-indexを入れてみて様子を見ましたがダメでした。
.informationにbackgroundを設置しても、星だけが突き抜けて一番上に表示されます。

お力添えいただけますと幸いです。

Answer 1

下記のCSSを追加したらどうでしょう。

.stars > :not(.star) {
  position: relative;
  z-index: 1;
}

Comments

[ojreee]

int32_t様と同じ内容のようですが、色々な記述があるんですね。
恥ずかしながら:not否定擬似クラスは存じ上げませんでしたので勉強になりました。
お二方の方法どちらも試したところ、無事後ろになってくれました！ありがとうございます。

Answer 2

.star は .stars の上に乗っているレイヤーなので、.stars のレイヤーに描かれる内容より常に手前になります。より手前に描きたいものを子レイヤーにして、z-index を指定しましょう。

• h1, img, div を <div class="no-stars">...</div> で囲む
• .no-stars に position:relative; z-index:1; を指定

Comments

[ojreee]

ご丁寧に説明していただき助かります。ありがとうございます！
.informationで囲んでいるのですがそのさらに上に.no-starsを作るべきでしょうか。

[int32_t]

質問文のHTMLに class="information" はないですが、もしそのようなものが既にあるなら、.information に position:relative; z-index:1; を適用すればいいかと思います。

[ojreee]

すみません、確認したところ、実現したいことの方にのみ入れた状態になっていましたね。
ありがとうございます！無事後ろに表示させることができました。
本当に助かりました。

[int32_t]

> 実現したいことの方にのみ入れた状態

あ、ほんとですね。私も見落としてました。失礼しました。