0

ロゴとバナー画像のリンクを使用したい。Z インデックスを使用して、バナーの上部にロゴを重ねて配置しようとしています。しかし、バナーのリンクを使用できないようです。

これが私のコードです：

    <div class="row">
        <div class="span10 ">
           <a href="/"><img src="../assets/img/sirtcantalilar-logo.png" class="toplogo" alt="sirtcantalilar-logo" /></a>
            <a href="http://www.turkishairlines.com/tr-tr/wingoya-katil" target="_blank">
            <img src="../assets/img/banner-yeni.jpeg" class="topbanner" alt="wingo-katil" /></a>
        </div>
    </div>

スタイル.css

img.topbanner
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;

}

img.toplogo {
    z-index: 0;
    position:relative;
    padding-top:10px;
}

それを修正する方法はありますか？

4

2 に答える 2

3

z-index: 1バナーやz-index: 2ロゴに付けてみてください。負の値は使用しないでください。

img.topbanner {
    position:absolute;
    left:0px;
    top:0px;
    z-index: 1;
}

img.toplogo {
    z-index: 2;
    position:relative;
    padding-top:10px;
}
于 2013-05-28T14:41:20.530 に答える
1

この MDN の記事Stacking Without z-indexを見てから、 z-index をミックスに追加するとどうなるか、どう変化しないかを確認してください。

その要点は、絶対位置要素の z-index が相対位置要素の z-index よりも優先されるということです。1 つのオプションは、.toplogoイメージとバナーの両方が同じ z-index 範囲でレンダリングされるように、イメージを絶対配置することです。

img.topbanner {
    position:absolute;
    left:0px;
    top:0px;
    z-index:1;
}
img.toplogo {
    z-index: 2;
    position: absolute;
    padding-top:10px;
}
于 2013-05-28T14:35:35.713 に答える