在圖像上放置文字時出現z-index問題

Question

我將首先提供CSS和HTML源。

的jsfiddle

現場示例在這里

問題是，除非我執行z-index: -1;否則h2文本不可見z-index: -1; 在images 。 它使文本出現，但是隨后圖像丟失了，我看着body background 。

除了頂部的固定導航欄之外，沒有其他東西可以觸及z-index值。

是什么原因造成的，您可以看看嗎？

PS。 寫作z-index: 2; 在H2標簽上也不起作用。

Answer 1

如果要使<h2>上的z-index:2有效，則應添加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-info h2從.spotlight-area .spotlight-info {刪除填充，並將邊距添加到.spotlight-area .spotlight .spotlight-item：將.spotlight-info 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;
} 

在我的測試中，此更改工作