Question

我将首先提供CSS和HTML源代码。

jsFiddle

The live example is here

问题是，除非h2 z-index: -1; images，否则body background文字不可见。然而，它使文本显示，然后图像丢失，我看z-index。

除了顶部的固定导航栏外，没有触及z-index: 2;值的内容。

可能导致这种情况的原因，你能看看吗？

聚苯乙烯。在H2标记上写{{1}}也不起作用。

Answer 1

如果您希望z-index:2 <h2>工作，则应添加position:relative;或position:absolute;或position:fixed。

您可以看到z-index

Answer 2

我改变你的HTML＆amp; CSS

HTML更改：将 img 移至 a 标记

 <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;
}

在我的测试此变更工作中

将文本放在图像上时的z-index问题

2 个答案: