我知道这里有很多关于 z-index 的问题，但我现在使用 z-index 有一段时间了，它一直运行良好，但现在我在这个问题上苦苦挣扎，我只是不了解为什么它不起作用，因为我认为我已完成所有必要步骤。
test.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js " type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.boxGrid').hover(function(){
$(".boxCaption", this).stop().animate({bottom:'0px'},{queue:false,duration:300});
}, function() {
$(".boxCaption", this).stop().animate({bottom:'-121px'},{queue:false,duration:300});
});
});
</script>
</head>
<body>
<div style="position: relative; width: 226px; height: 246px;">
<div class="boxGrid">
<div class="buttonBack blogImg">
<div class="boxCaption">
<h3>Top-Blog</h3>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
.boxGrid
{
width: 226px;
height: 246px;
background-image: url(buttonBorder.png);
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
}
.buttonBack
{
position: absolute;
top: 12px;
left: 13px;
border: 0px;
width: 200px;
height: 223px;
z-index: 50;
overflow: hidden;
}
.blogImg
{
background-image: url(blogButton.png);
}
.boxCaption
{
position: absolute;
background: url(caption.png);
height: 121px;
width: 100%;
bottom: -121px;
text-align: center;
}
.boxCaption h3
{
font-size: 30px;
color: #fff;
}
所以我希望这个 .boxGrid 类位于 .buttonBack 类之上，我将 position: 属性添加到所有正在使用的 div z-index.
JsFiddle所以红色框需要在蓝色框后面。
提前致谢
最佳答案
您不能将子元素“隐藏”在其父元素下，因为当您为父元素设置 z-index 时，子元素也会受到影响。让他们成为 sibling 。
<div style="position: relative; width: 226px; height: 246px;">
<div class="boxGrid"></div>
<div class="buttonBack blogImg">
<div class="boxCaption">
<h3>Top-Blog</h3>
</div>
</div>
</div>
看看这个 jsfiddle:http://jsfiddle.net/ZwC9n/
关于javascript - z-index 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13882682/