html - HTML 要素を他の要素の上に重ねるにはどうすればよいですか?

Question

私のサイトには、このような css3 の動く雲の背景があります。

• http://cssdeck.com/labs/animated-clouds-background-pure-css3
• http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background

ただし、雲がテキストの上に重なっていて、テキストの上に置いてもテキストが見えません。これらの要素を雲の上に載せる方法はありますか?

Answer 1

HTML構造が次のような場合：

<div id="sky-container">
  <div id="cloud-container">
    ...
  </div>
</div>
<div id="text-container">
  ...
</div>

おめでとうございます、あなたはすでに完了しています、あなたはそれらを正しく配置する必要があります（絶対的な配置）。テキストはすでに雲の上に表示されているはずです。HTMLが次のような場合：

<div id="cloud-container">
  ...
</div>
<div class="background">
  <div class="background">
     <div class="text">
        ...
     </div>
  <div class="text">
    ...
  </div>
  ...
</div>

つまり、背景が1つもない場合でも、背景とテキストの間に雲を挿入できます。HTMLのテキストから背景を分離する必要があります。を使用しz-indexて、テキストと背景の間に雲を配置できます。

.background{
  z-index:0;
}
#cloud-container{
  z-index:1;
}
.text{
  z-index:2;
}

デフォルトz-indexは0であるため、クラウドコンテナーがページの最後の要素になることがわかっている場合（および取得する要素であるposition:absolute場合）、CSSを次のように簡略化できます。

.text{
  z-index:1;
}

z-indexを持つ要素も、そのpositionプロパティを明示的にabsolute、relativeまたはに設定する必要がありますfixed。