3

最近サイトギャラリーで働いていて、画像の前に説明ラベルを作ろうとしています。したがって、これは次のようになります。

ここに画像の説明を入力

そのhtml：

<li class="project-item">
  <img src="images/project_example.jpg" alt="">
  <div class="annotation">
    <div class="annotation_head">Head</div>
    <div class="annotation_footer">Footer</div>
  </div>
</li>

.annotation クラスのブロックは絶対、.project-item は相対です。しかし、その前に、私には奇妙に見える別のソリューションを使用しましたが、その動作を説明できません。ここにあります：

ここに画像の説明を入力

position: absoluteわかりやすいように、ルールをに置き換え、黒から赤にmargin-top: -50px変更しました。 奇妙なことに、その背景色は画像の後ろに表示されますが、前にあるはずです。なぜですか? 合理的なCSSルールはありますか?color

4

1 に答える 1

1

テキストが背景から分離されているのは、要素の背景と前景が独立しているためです。

に黒の背景を追加した.project-item liところ、赤の子背景が黒の親背景の上に正しく配置されていることがわかります。 .annotationの後に DOM に表示されるimgため、これらの前景も適切にレイヤー化されます。赤い注釈の背景をli前景の上に表示したい場合は、範囲内の新しいドキュメント フローを開始する必要がありますli.project-item。

この場合、目的のポジショニングが達成.slider .project-item .annotation{ position: absolute;}されますが、現在はポジショニングによって上書きされていますstatic。

適切にレイヤー化された背景

于 2013-02-24T16:35:20.083 に答える