如何让<div>元素落在另一个<div>元素</div> </div>之下

时间:2014-09-25 12:37:59

标签: html css image

我试图让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>

1 个答案:

答案 0 :(得分:1)

没有办法将一个元素放在它内部的东西后面(这非常像试图在一个盒子内部和下面放置一个盘子)。您必须将图像元素移到标题元素之外。