Question

我想使用我的徽标和横幅图片链接。我试图用z-index将徽标分层放在横幅的顶部。但我似乎无法使用链接作为我的横幅。

这是我的代码：

    <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>

的style.css

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

}

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

任何想法如何解决？

Answer 1

尝试将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;
}

Answer 2

查看这篇MDN文章Stacking Without z-index，然后看看如何在混合中添加z-index并且不会改变事物：Adding z-index。

它的要点是绝对位置元素的z-index优先于相对定位元素的z-index。一种选择是使您的.toplogo图像绝对定位，以便它和横幅都在相同的z-index范围内呈现：

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

不能同时使用带有z-index的图像链接

2 个答案: