html - 画像の上にテキストを配置するときの z-index の問題

Question

最初に CSS と HTML ソースを提供します。

jsフィドル

実例はこちら

問題は、私がしh2ない限り、テキストが表示されないことです。テキストが表示されますが、画像が失われているので.z-index: -1;imagesbody background

z-index上部の固定ナビゲーション バーを除いて、値に触れるものはありません。

何が原因なのですか？

Ps。z-index: 2;タグへの書き込みH2も機能しません。

Answer 1

z-index:2作品が必要な場合は、または<h2>を追加する必要があります。position:relative;position:absolute;position:fixed

あなたが見ることができますz-index

Answer 2

HTMLとCSSを変更します

HTMLの変更：imgをタグに移動します

 <div class="spotlight-area">
    <div class="spotlight">

            <div class="spotlight-item width-2 height-2">
                <a href="#" class="spotlight-info">
                    <h2 class="large">
                        Random text
                    </h2>
                    <img src="http://www.sobafire.com/__v2/themes/default/images/news/spotlight-big.jpg" alt="haber">
                </a>


            </div>

            <div class="spotlight-item width-1 height-1">
                <a href="#" class="spotlight-info">
                    <h2>
                        Random Text
                    </h2>
                </a>

                <img src="http://i.imgur.com/TAxDMus.jpg" alt="haber">
            </div>

            <div class="spotlight-item width-1 height-1">
                <a href="#" class="spotlight-info">
                    <h2>
                        Random Text
                    </h2>
                    <img src="http://i.imgur.com/TAxDMus.jpg" alt="haber">
                </a>


            </div>

            <div class="spotlight-item width-1 height-1">
                <a href="#" class="spotlight-info">
                    <h2>
                        Random Text
                    </h2>
                    <img src="http://i.imgur.com/TAxDMus.jpg" alt="haber">
                </a>


            </div>

            <div class="spotlight-item width-1 height-1">
                <a href="#" class="spotlight-info">
                    <h2>
                        Random Text
                    </h2>
                    <img src="http://i.imgur.com/TAxDMus.jpg" alt="haber">
                </a>


            </div>

            <div class="spotlight-item width-1 height-1">
                <a href="#" class="spotlight-info">
                    <h2>
                        Random Text
                    </h2>
                    <img src="http://i.imgur.com/TAxDMus.jpg" alt="haber">
                </a>


            </div>

    </div>
</div>

css：

CSSで変更：位置を削除：絶対; imgから.spotlight -area.spotlight.spotlight-item：hover .spotlight-infoh2に追加します。.spotlight-area.spotlight-info{からパディングを削除し、.spotlight-area.spotlight.spotlight-itemにマージンを追加します。ホバー.spotlight-同様の値の情報h2

.spotlight-area {
width: 790px;
margin: 0px auto;
padding: 0px;
}
.spotlight-area img, .spotlight-area embed {
max-width: 100%;
height: auto;
min-height: 50px;
}

.spotlight-area .spotlight {
display: block;
border-top: 1px solid #3b3b3b;
border-left: 1px solid #3b3b3b;
float: left;
margin-bottom: 4px;
}

.spotlight-area .spotlight .width-1 { width: 262px }
.spotlight-area .spotlight .width-2 { width: 525px }
.spotlight-area .spotlight .height-1 { height: 174px }
.spotlight-area .spotlight .height-2 { height: 349px }
.spotlight-area .spotlight .spotlight-item {
float: left;
position: relative;
border-bottom: 1px solid #3b3b3b;
border-right: 1px solid #3b3b3b;
overflow: hidden;
 }

 .spotlight-area .spotlight .spotlight-item:hover .spotlight-info h2 {
color: #ffc203;
 }
 .spotlight-area .spotlight .spotlight-item img {
width: 100%;
height: 100%;

top: 0;
left: 0;
margin: 0;
border: 0;
    z-index: -1; /* tricky part */
}

.spotlight-area .spotlight-info {
display: block;
height: 100%;
min-height: 50px;
}

.spotlight-area .spotlight-info a {
display: block;
height: 100%;
min-height: 50px;
padding: 20px;
}

.spotlight-area .spotlight .spotlight-item .spotlight-info h2 {
display: inline-block;
max-width: 480px;
font-size: 30px;
line-height: 32px;
color: #f0f0f0;
    position: absolute;
    margin:20px;
} 

私のテストではこの変更作業