imgタグをオーバーラップすると背景/境界線が後ろに、テキストがimgの前にレンダリングされる

Question

単純なリンク先ページでは、テキストボックスとヘッダーイメージが重なり合うようにしたいと考えました。

<header> 
    <img src="path/to/img.png" /> 
    <h1>Awesome headline</h1> 
</header> 

すべての要素がdisplay:blockに設定されているとh1が負のマージンで画像の内側にドラッグされた：それはシンプルにするために、私はちょうどのような構造を有しています。私はまた、いくつかの詰め物とbackground:whiteの見出しを与えた。

問題：画像の上に見出しのテキストが表示されますが、背景色はその背景にあります。その後、他のすべての上に画像（IMGタグ）、最後にテキストのレンダリング、ブラウザはすべての背景やボーダーで始まる、レイヤー内のすべての兄弟のブロックをレンダリングすること、https://jsfiddle.net/cv12evLn/

私の推測です：あなたはここでは例を見ることができます。

そうですか？そして、なぜ実際には...私は、それは私には予想外の狂ったようだ。

私は問題を解決するために、見出しをラッパーに入れて、position:absoluteに設定しました。実際の例はこちらをご覧ください：https://jsfiddle.net/f5sd1u6o/

Answer 1

負のマージンではなくposition:relativeを使用してください。その後、z-indexは自動的に動作します。

#container { 
 
    width: 500px; 
 
    height: 300px; 
 
    margin: auto; 
 
} 
 
#container img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
#container h1 { 
 
    display: block; 
 
    width: 50%; 
 
    height: 1em; 
 
    margin: auto; 
 
    padding: .5em 1em 1em; 
 
    font-size: 3rem; 
 
    background: yellow; 
 
    text-align: center; 
 
    border: 1px solid red; 
 
    position: relative; 
 
    top: -4.6rem; 
 
}

<div id="container"> 
 
    <img src="//placekitten.com/500/300"> 
 
    <h1> 
 
    headline 
 
    </h1> 
 
</div>

Z-indexが仕事を得るために、あなたはとにかくposition:relativeを適用する必要がありますが、それは設計要件である場合、あなたはまだ負のマージンを使用することができます。

JSfiddle demo（負のマージンを持つ）

基本的には、背景は何かの前に最初にレンダリングされている（私はそれを理解したように）ので、彼らは常に重なり順の一番下に来ます。新しいスタッキングコンテキストを作成するだけで、位置プロパティを変更するだけでそれが可能です。

それはとてもとても簡単な修正がopacity:.9999;

JSfiddle Demo（不透明ハック「」）