不透明度作为背景和图像

Question

通常我可以解决这些问题，但我无法在任何地方找到解决方案。我有一个设置宽度和高度以及不透明度为 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;
}

Answer 1

将position: relative 添加到.banner。我已将整个工作解决方案包含在 jsFiddle 中（为清晰起见进行了颜色编码）。