Question

我有两个img标签，如下所示，但带有“portfolioImage1”类的img标签总是显示在img标签下面，类为“portfolioItem1”。我怎样才能实现另一种方式，以便portfolioImage1高于portfolioItem1？

先谢谢。

<div class="portfolioContainer">
    <img class="portfolioImage1" src="img/image1.png" />
    <img class="portfolioItem1" src="img/portfolioItem.png" />
</div>

CSS

.portfolioContainer {
    height: 400px;
    width: 490px;
    left: 400px;
    top: 275px;
    position: absolute;
}
.portfolioItem1 {
    left: 20px;
    z-index: 1;
    position: absolute; 
}
.portfolioImage1 {
    z-index: 2;
}

Answer 1

编辑：

您需要向portfolioImage1添加相对，绝对或固定的位置，以便z-index起作用。

OLD：

如果您的意思是在图像后面尝试使用z-index：

<div class="portfolioContainer" style="position: relative;"> 
    <img class="portfolioImage1" src="img/image1.png" style="position: relative; z-index: 2" /> 
    <img class="portfolioItem1" src="img/portfolioItem.png" style="position: relative; z-index: 1" /> 
</div>

如果您的意思是下面，您可以使用绝对或相对定位，但我们需要尺寸和所需的结果。例如，假设image1.png高20px，portfolioItem.png高25px：

<div class="portfolioContainer"> 
    <img class="portfolioImage1" src="img/image1.png" style="position: relative; top: 25px;" /> 
    <img class="portfolioItem1" src="img/portfolioItem.png" style="position: relative; top -20px" /> 
</div>

在img html上添加img

1 个答案: