通常我可以解决这些问题，但我无法在任何地方找到解决方案。我有一个设置宽度和高度以及不透明度为 0.8 的 div，它位于最顶部。我还有一个从左到右全屏显示的横幅。
div 总是在横幅的前面，无论我做什么（浮动、代码重新排列、z-index），都没有区别。
HTML
<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>
CSS
.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;
}
