在 img html 顶部添加 img
我有两个 img 标签，如下所示，但类 portfolioImage1 的 img 标签始终显示在类 portfolioItem1 的 img 标签下方。我怎样才能以相反的方式实现它，以便 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;
}
I have two img tags as shown below, but the img tag with the class portfolioImage1 always shows up underneath the img tag with the class portfolioItem1. How can I achieve having it the other way around so that portfolioImage1 is above 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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
编辑：
您需要向portfolioImage1 添加相对、绝对或固定的位置，以便 z-index 发挥作用。
旧：
如果您的意思是在图像后面，请尝试使用 z-index：
如果您的意思是在下面，您可以使用绝对或相对定位，但我们需要尺寸和所需的结果。例如，假设 image1.png 的高度为 20 像素，portfolioItem.png 的高度为 25 像素：
EDIT:
You need to add a position relative, absolute or fixed to the portfolioImage1 in order for z-index to work.
OLD:
If you mean behind the image try using z-index:
If you mean below, you can use absolute or relative positioning, but we need dimensions and desired results. For example, say that image1.png is 20px high and portfolioItem.png is 25px high: