把絕對位置div超過最後一個圖像

Question

我有以下代碼，它的目標是我的Wordpress文章中的最後一個圖像，並把它放在#first-img上，它只留下其他圖像。

<div id="s-img" class="row">  
    <?php 
     preg_match_all('/(<img [^>]*>)/', get_the_content(), $images); 
     for($i=0; isset($images[1]) && $i < count($images[1]); $i++) { 
     if ($i == end(array_keys($images[1]))) { 
     echo sprintf('<div id="last-img">%s</div>', $images[1][$i]); 
     continue; 
     } 
      echo $images[1][$i]; 
     } 
    ?> 
</div> 

CSS

#last-image { 
    position: absolute 
    height: 50px; width: 50px; 
    background-color: red; 
} 

問題是，我希望它把#first-img ON-TOP的圖像，並留下圖像本身孤單。現在它取代了圖像。

呈現的HTML - 上的圖像和最後一個影像

<div id="s-img" class="row">   
<img class="alignnone size-large wp-image-396" src="http://localhost/wordpress/wp-content/uploads/2015/12/img3-1008x720.jpg" alt="img3" height="720" width="1008"> </img> 
</div> 

<div id="last-img"> 
<img class="alignnone size-large wp-image-397" src="http://localhost/wordpress/wp-content/uploads/2015/12/img4-1080x720.jpg" alt="img4" height="720" width="1080"></img> 
</div> 

Answer 1

問題是，我希望它把＃第一IMG在最上層的圖像，並獨自離開圖像本身

究竟是什麼你想在這裏實現什麼？我沒有看到你輸出任何額外的文本內容（如f.e.圖像描述），所以我假設你只是想在圖像上覆蓋一個空元素，以應用某種CSS效果（背景顏色）？

如果是這樣，你應該可以使用僞元素 - 而不是圖像本身（因爲具有空內容模型的元素不能具有這些元素），但是在放置圖像的div容器上：

#last-image { 
    position: relative; 
    /* display:line-block; */ /* you might need to add that, */ 
         /* if the image is not covering full width */ 
} 
#last-image:after { 
    content: ""; 
    position: absolute; 
    top: 0; left:0; right:0; bottom:0; /* automatically stretch */ 
            /* to full parent width/height */ 
    background-color: red; 
    z-index: 1; /* might not be necessary, depends on rest of CSS */ 
} 

Answer 2

的z-index將「上面」所有其他的圖像，以及「上面」所有其他網頁元素將具有較低的z-index。

#first-img { 
z-index: 999; 
}