CSS 将 img 置于最前面

Question

我在将图像返回到前面时遇到一些问题。

基本上这是我的代码段：

<itemimg>
    <a href="images/table1.jpg" data-lightbox="table1" data-title="Rustic Green Table"><img src="images/table1.jpg" /></a>
    <a href="images/table1-side.jpg" data-lightbox="table1" data-title="Rustic Green Table"><img src="images/table1-side.jpg"></a>
</itemimg>

链接 table1-side.jpg is overlapping thetable1.jpgbut i want it the other way around.table1.jpg` 的第二个 a href 应该在最上面。

影响这部分的css在这里：

itemimg {
display: block;
width: 200px;
height: 200px;
}
itemimg img:nth-child(1) {
z-index: 9999;
}
itemimg img:nth-child(2) {
z-index: 0;
}
itemimg img {
position: absolute;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 200px;
height: 200px;
}
itemimg a {
display: block;
position: absolute;
cursor: zoom-in;
}

我试过（如您所见）用 z-index 将第二张图片发送到后面，但没有成功。我什至尝试弄乱 itemimg img 上的 position 属性看它是否会重新排列它们。我什至在 HTML 中调换了它们，所以一个在最上面确实工作但是我正在使用 Lightbox 并且当我安排HTML 到 table1.jpg 位于顶部的位置，Lightbox 中的导航是向后的（因为我必须按向左箭头向后而不是向前才能看到图像）。 <- 我知道这可能令人困惑，但请您自己看一下 here。单击 table 以调出灯箱，您必须在幻灯片中向后导航而不是向前导航，这是我不想要的。所以我想如果我能得到 table1.jpg 最重要的是，它会按照我的意愿前进，这就是我遇到的麻烦。

这里真的需要帮助，在此先感谢！

解决方案：

对于想知道解决方案的人。根据您的情况，以下答案效果很好。然而，我想避免使用内联 css 和类，所以我将图像实现为 ul 并将第二个 li 的 z-index 设置为 -1 这样的：

HTML

<itemimg>
    <ul>
        <li><a href="images/table1.jpg" data-lightbox="table1" data-title="Rustic Green Table"><img src="images/table1.jpg" /></a></li>
        <li><a href="images/table1-side.jpg" data-lightbox="table1" data-title="Rustic Green Table"><img src="images/table1-side.jpg" /></a></li>
    </ul>
</itemimg>

CSS

itemimg {
    display: block;
    width: 200px;
    height: 200px;
}
itemimg ul {
    position: absolute;
    list-style: none;
    padding: 0;
    margin: 0;
}
itemimg li {
    width: 200px;
    height: 200px;
    position: absolute;
}
itemimg ul li:nth-child(2) {
    z-index: -1;
}
itemimg img {
    position: absolute;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width: 200px;
    height: 200px;
}
itemimg a {
    display: block;
    position: inherit;
    cursor: zoom-in;
}

我的网站更新了最终结果，所以 go and take a look!

Answer 1

问题出在第二个z-index上。像这样让它成为-1：

itemimg {
display: block;
width: 200px;
height: 200px;
}
itemimg img:nth-child(1) {
z-index: 9999;
}
itemimg img:nth-child(2) {
z-index: -1; //make this -1
}
itemimg img {
position: absolute;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 200px;
height: 200px;
}
itemimg a {
display: block;
position: absolute;
cursor: zoom-in;
}

Answer 2

两张图片的 z-index 都是 9999。

解决方案 1：

在 HTML 中对其中之一进行硬编码。

<itemimg>
<a href="images/table1.jpg" data-lightbox="table1" data-title="Rustic Green Table"><img src="images/table1.jpg" style="z-index:10000"/></a>
<a href="images/table1-side.jpg" data-lightbox="table1" data-title="Rustic Green Table"><img src="images/table1-side.jpg"></a>

解决方案 2：

给前面的图片一个 id 并命名为 "frontImage" 然后添加

.frontImage {
    z-index:10000;
}

CSS 将 img 置于最前面

CSS bring img to front

html

css

position