html - 不能将两个图像链接与 z-index 一起使用

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>

样式.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 添加到组合中如何改变和不改变事物：添加 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;
}