在img html

Question

上添加img我有兩個img標籤，如下所示，但帶有「portfolioImage1」類的img標籤始終顯示在img標籤下，類爲「portfolioItem1」。我如何實現讓投資組合圖像1位於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>