putting absolute position div overtop last image

Question

I have the following code which targets the last image in my Wordpress post and puts #first-img on it, it leaves the other images alone.

  <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;
}

Problem is I want it to put #first-img ON-TOP of the image and leave the image itself alone. Right now it replaces the image.

Rendered html - on images and last image

<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

Problem is I want it to put #first-img ON-TOP of the image and leave the image itself alone

What exactly are you trying to achieve here? I don't see you outputting any extra text content (like fe an image description), so I assume you just want to overlay an empty element over the image, to apply some kind of CSS effect (background-color)?

If so, you should be able to use a pseudo-element for that – not on the image itself (because elements with the empty content model can't have those), but on the div container you put around the image:

#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 will place the image 'above' all others, as well as 'above' every other page element with a lower z-index.

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