将绝对位置 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 放在图像的顶部，而不是图像本身。现在它替换了图像。

渲染的 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

问题是我希望它把 #first-img 放在图像的顶部，而不是图像本身

您究竟想在这里实现什么目标？我没有看到您输出任何额外的文本内容（例如图像描述），所以我假设您只想在图像上覆盖一个空元素，以应用某种 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;
}