как заставить расположить маленькое изображение поверх родительского изображения в css

Question

У меня есть дизайн веб-страницы (это изображение), я встроил его в html и для его отображения, и код css выглядит следующим образом

.imageMain {
  position: relative;
  height: 100vh;
  /* For 100% screen height */
  width: 100vw;
  /* For 100% screen width */
}

img#homeinactive {
  position: relative;
  top: -960px;
  left: 750px;
  width: 40px;
  height: 40px;
  z-index: 999;
}

<img class="imageMain" src="images/mainphoto.png" />
<a href="index.php"><img id="homeinactive" class="ontopPhoto" src="images/navHeader/ontopphoto.jpg" /></a>

Теперь мне нужно поместить небольшое изображение поверх этого изображения, которое будет служить кнопкой, которая будет перенаправлять пользователя куда-то. проблема в том, что за размером экрана следует только родительское изображение, и оно фактически растягивается автоматически, независимо от размера экрана, из-за моего класса .imageMain css.

маленькое изображение теряется, когда я Измените размер экрана, если хотите знать, что добавить в css, чтобы он оставался как в средней части экрана, независимо от размера экрана. Обратите внимание, это маленькое изображение находится над основным изображением. Вот мой css, это неправильно

вот html

Answer 1

Вы можете легко достичь этого, используя flex. Оберните ваше второе изображение в div и используйте justify content: center;, и оно всегда будет в центре.

Вот пример: https://jsfiddle.net/psparthsahni/50e9nuzh/

Answer 2

.container {
  position: relative
}
.imageMain {
    height: 100vh; /* For 100% screen height */
    width:  100vw; /* For 100% screen width */
    object-fit: cover;
}

img#homeinactive {
    position: absolute;
    left: 50%;
    top:0;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
}

<div class="container">
<img class="imageMain" src="images/mainphoto.png" />
        <a href="index.php"><img id="homeinactive" class="ontopPhoto" src="images/navHeader/ontopphoto.jpg"/></a>
</div>