通常我可以解决这些问题,但我无法在任何地方找到解决方案。我有一个设置宽度和高度的div,以及位于最顶端的0.8的不透明度。我还有一个从左到右全屏的横幅。
div总是在横幅前面,无论我做什么(浮动,代码重新排列,z-index),它都没有区别。
<div class="banner">
<img class="banner_image" style="z-index:100" src="/top_banner2.png" alt="banner" />
</div> <!-- end of banner -->
<div class="left" style="z-index:-100">
<ul style="list-style: none;">
<li class="left_words"><a href="/index.php">Home</a></li>
<li class="left_words"><a href="/awesome.php">Awesome</a></li>
<li class="left_words">Catering</li>
<li class="left_words">Our Coffee</li>
<li class="left_words">Flow Chart</li>
<li class="left_words">Prototype</li>
<li class="left_words">Catering</li>
<ul/>
</div>
.banner{
width: auto;
height: 80px;
margin-top: 50px;
margin-bottom: 70px;
z-index: 100;
}
.banner_image{
margin-top: -20px;
display: block;
margin-right: auto;
margin-left: auto;
z-index: 100;
}
.left{
float: left;
width: 300px;
height: 800px;
margin-left: 90px;
background-color: #ffffff;
opacity: .9;
padding-top: 250px;
margin-top: -200px;
z-index: -100;
}
.left_words{
margin-right: 15px;
text-align: right;
font-size: 30px;
text-transform: uppercase;
font-weight: bold;
padding-bottom: 5px;
}