我试图让DIV滚动标记中的图像落在我的固定标题DIV之后,我尝试使用z-index:-4000!important;换句话说,它完全反对标题这似乎不起作用(我也尝试过z-index完全仍然无效)。我真的很感激这方面的帮助,我认为我的方法不正确。
CSS below for the two divs.
/* Header Div */
.fixed-header {
position: fixed;
z-index: 4000;
padding: 10px 0 10px;
display: block;
width: 100%;
height: 125px;
background: #fff;
box-shadow: 0 2px 1px #999;
-webkit-box-shadow: 0 2px 1px #999;
-moz-box-shadow: 0 2px 1px #999;
-ms-box-shadow: 0 2px 1px #999;
-o-box-shadow: 0 2px 1px #999;
}
/* Element to go behind the fixed header */
.scroll-marker img {
display: block;
margin: 0 auto;
clear: both;
z-index: -4000!important;
position: relative;
}
CSS for logo div.
#logo {
margin: 0;
float: right;
}
#logo p {
font-size:11px;
text-align: center;
line-height: 1!important;
}
#logo p a {
color: #868686;
}
#logo p a:hover {
color: #A4C940;
}
#logo img {
margin: 0 auto;
}
#logo_info {
margin: 10px;
}
#logo_info p {
font-size:11px;
text-align: center;
line-height: 1!important;
}
#logo_info p a {
color: #868686;
}
#logo_info p a:hover {
color: #A4C940;
}
HTML for the header Region
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- preloader-->
<div class="whitebg">
<div id="spinner"></div>
</div>
<header class="fixed-header">
<div class="centered-wrapper">
<div id="logo"><a href="index.html"><img src="images/value_images/VPM_global3.png"></a>
</div>
<div class="scroll-marker"><img src="images/value_images/scroll-marker.png"></div>
</div><!-- End Centered Wrapper -->
</header>
<section>
Another Section..............
</section>
</body>
</html>
答案 0 :(得分:1)
没有办法将一个元素放在它内部的东西后面(这非常像试图在一个盒子内部和下面放置一个盘子)。您必须将图像元素移到标题元素之外。