Css 如何将图像放置在li中（悬停时）更改其z索引的图像上

我在li中有以下图像：

  <ul class="columns">
    <li><a href="some url"><img src="images/layouts/test.png" alt="" /></a> </li>
</ul>

它做什么： 当我将鼠标悬停在图像（test.png）上时，图像将获得一个新的z索引。这是保持图像可见所必需的（悬停时会显示一个div，并且图像应该位于其顶部）。这一切都很好

现在我想在正常图像的右上角有一个图像（显示一个X，所以我们称之为X.png）。如何做到这一点？将test.png设置为背景图像不是一个选项。使用了一些类和z索引，但第二个图像总是出现在test.png图像之外。我想我的CSS有问题，但我不知道如何对li中的第二个图像进行z索引

我有一台自动取款机：

<ul class="columns">
    <li><a href="some url"><img src="images/layouts/test.png" alt="" /> <img class="x" src="images/x.png" alt="" /></a> </li>
</ul>

谢谢

试试类似的东西

 ul.columns li img,
 ul.columns li {
    position: relative; /* so the close image is relatively 
                           positioned inside <li> */
    z-index : 1;
 }

 ul.columns li img + img {
    position: absolute;
    top     : 0;
    right   : 0;
    display : none;
 }

 ul.columns li:hover img { z-index: 999; }
 ul.columns li:hover img + img  { z-index : 1000; display: block; }

ul.li img，
李先生{
位置：相对；/*因此近景图像相对
位于内部
*/
z指数：1；
}
ul.liimg+img列{
位置：绝对位置；
排名：0；
右：0；
显示：无；
}
ul.li列：悬停img{z-index:999；}
ul.columns li:hover img+img{z-index:1000；display:block；}

试试下面的方法

 ul.columns li img,
 ul.columns li {
    position: relative; /* so the close image is relatively 
                           positioned inside <li> */
    z-index : 1;
 }

 ul.columns li img + img {
    position: absolute;
    top     : 0;
    right   : 0;
    display : none;
 }

 ul.columns li:hover img { z-index: 999; }
 ul.columns li:hover img + img  { z-index : 1000; display: block; }

ul.li img，
李先生{
位置：相对；/*因此近景图像相对
位于内部
*/
z指数：1；
}
ul.liimg+img列{
位置：绝对位置；
排名：0；
右：0；
显示：无；
}
ul.li列：悬停img{z-index:999；}
ul.columns li:hover img+img{z-index:1000；display:block；}

也许你正在尝试这样做

您应该在链接中使用

position:relative

，因此当您使用

right:0

样式时，图像将转到锚的右侧

.columns a {
    position:relative;
}
.colums a .x {
    right: 0;
    top: 0;
    z-index: -1;
}

另外，按类

x

引用关闭的第二个图像，如以下css样式：

.columns a:hover .x {
    z-index: 999;
    /* class="x" specific hover styles */
}

---

也许你想做这样的事

您应该在链接中使用

position:relative

，因此当您使用

right:0

样式时，图像将转到锚的右侧

.columns a {
    position:relative;
}
.colums a .x {
    right: 0;
    top: 0;
    z-index: -1;
}

另外，按类

x

引用关闭的第二个图像，如以下css样式：

.columns a:hover .x {
    z-index: 999;
    /* class="x" specific hover styles */
}