在图像上放置文字时出现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;
} 

在我的测试中，此更改工作