1

通常、これらは解決できますが、どこにも解決策が見つかりません。一番上に幅と高さが設定され、不透明度が 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;
}

ここに画像の説明を入力

4

1 に答える 1

0

に追加position: relativeし.bannerます。作業ソリューション全体をjsFiddleに含めました(わかりやすくするために色分けしています)。

于 2013-03-29T02:09:05.007 に答える