[英]z-index issue when placing text over images
I'll provide CSS and HTML sources first. 我将首先提供CSS和HTML源。
The live example is here 现场示例在这里
The problem is, h2
texts are not visible unless I do z-index: -1;
问题是,除非我执行
z-index: -1;
否则h2
文本不可见z-index: -1;
on images
. 在
images
。 It makes the text appear, however, then the image is being lost and I look at body background
. 它使文本出现,但是随后图像丢失了,我看着
body background
。
There is not something touching z-index
values except the fixed navigation bar at top. 除了顶部的固定导航栏之外,没有其他东西可以触及
z-index
值。
What may be causing this, can you have a look? 是什么原因造成的,您可以看看吗?
Ps. PS。 Writing
z-index: 2;
写作
z-index: 2;
on H2
tags doesn't work either. 在
H2
标签上也不起作用。
i change your HTML & CSS 我更改您的HTML和CSS
change in HTML: Move img into a tag 在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:
change On CSS: Remove position: absolute; 在CSS上更改:移除位置:绝对; From img and ADD It TO .spotlight-area .spotlight .spotlight-item:hover .spotlight-info h2 Remove padding From .spotlight-area .spotlight-info { and Add Margin to .spotlight-area .spotlight .spotlight-item:hover .spotlight-info h2 with similar value
从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;
}
in My Test This Change work 在我的测试中,此更改工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.