Centering overlapping images while window re-sizes

Issue

I have 2 images of identical size that need to overlap perfectly and remain overlapped while the window re-sizes. For some reason, setting position: absolute; reverses the centering. Here is the code so far, i've replaced my images with generic ones found on google images.

<img src = "http://www.brittlestar.org.uk/wp-content/uploads/2014/02/300x300.gif" width = 50%  height = auto style="position: relative; margin-left: auto; margin-right: auto; display: block;">
<img src = "https://www.leadheroes.com/wp-content/uploads/superforms/2018/07/883153652/5361c9b53077aa52c50fa005b15c6c4f%20(2)-300x300.png" width = 50% height = auto style = "position: absolute; z-index: 2; top: 50%; margin-left: auto; margin-right: auto; display: block;">

How to fix this?

Solution

You have to use a container box that contains your two images and add position: relative to that box. Also you can use flex to center the content of the box. Finally add position: absolute to the image you want to overlap. Here is an example:

.container {
  width: 50%;
  display: flex;
  position: relative;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}

.container img {
  width: 100%;
}

.container img.overlap {
  position: absolute;
}

<div class="container">
  <img src="https://dummyimage.com/300x300/c9c9c9/fff">
  <img class="overlap" src="https://www.leadheroes.com/wp-content/uploads/superforms/2018/07/883153652/5361c9b53077aa52c50fa005b15c6c4f%20(2)-300x300.png">
</div>

Answered By - Nacorga