Question

我基本上希望在最前方有一个居中的图像（“drob”div），如果它们重叠，其他div就坐在它后面。

这是代码：

body {
background-image:url('background.jpg');
}

#container {
width: 1040px;
height: 768px;
margin: 0 0 0 75px;
}


#navbar {
float: right;
height: auto;
width: 150px;
margin: 0 0 0 10px;
color: #FF0;
list-style: none;

}


#note {
width: auto;
height: auto;
float: left;
margin: 20px 0 0 -110px;

}


#drob {
height: auto;
width: auto;
float: left;
margin: 50px 0 0 -20px;

}


#gallery {
float: left;
width: 675px;
height: auto;
margin: -125px 0 0 -20px;

}


#gallery img {
float: left;
margin: 0 0 0 5px;  

}


#video {
height: auto;
width: auto;
float: left;
margin: 150px 0 0 -20px;

}


<div id="container">
<div id="navbar">
    <ul>
        <li>Home</li>
        <li>About Denard</li>
        <li>Stats</li>
        <li>Media</li>
    </ul>
</div>
<div id="video">
<iframe width="450" height="265" src="http://www.youtube.com/embed/ZmmCAI8U_Vc" 
frameborder="0" allowfullscreen></iframe>
</div>
<div id="drob">
<img src="images/drob.png" height="560" width="404" alt="Denard Robinson" />
</div>
<div id="note">
    <a href="#"><img src="images/note.png" height="464" width="331" alt="note" /></a>
</div>
<div id="gallery">
    <img src="denard1.jpg" height="145" width="215" alt="denard1" />
    <img src="denard2.jpg" height="145" width="215" alt="denard2" />
    <img src="denard3.jpg" height="145" width="215" alt="denard3" />
</div>

</div>    


</body>

Answer 1

您需要设置重叠div的z-index。

具有较低z-index的div将位于具有较高索引的div之后。

您可以在http://reference.sitepoint.com/css/z-index

找到有关z-index的更多信息

Answer 2

只要你没有任何选择的iframe，你就可以通过添加z-index将事物放在首位。但是在这个scase中，你有iframe ..所以，尝试使用绝对定位将一个置于另一个之上。会是这样的：

#drob {
height: auto;
width: auto;
float: left;
margin: 50px 0 0 -20px;
position: absolute;
}

或者可能同时尝试z-index和position ...因为我认为z-index适用于定位的元素：

#drob {
height: auto;
width: auto;
float: left;
margin: 50px 0 0 -20px;
position: absolute;
z-index: 5;
}

也许它会起作用

如何将div放在另一个div的顶部？

2 个答案: