Я пытаюсь расположить два изображения друг над другом с некоторой степенью точности.
Проблема в том, что верхнее изображение (круг) проходит повсюду.
Оба изображения находятся в адаптивной сетке, а базовое изображение должно быть все время центрировано.
Допустим, например, что я пытаюсь нацелиться на бедро.
Всякий раз, когда я сжимаю страницу, правильное изображение опускается ниже (это именно то, что я хочу), а круг идет куда-то еще (в данном случае, рука).
Вот мой код:
/* No-margins Class Rules */
.row.no-gutters {
margin-right: 0;
margin-left: 0;
}
.row.no-gutters>[class^="col-"],
.row.no-gutters>[class*=" col-"] {
padding-right: 0;
padding-left: 0;
}
/* Centers content */
.centered-img {
display: flex;
align-items: center;
justify-content: center;
min-width: 100px;
}
.img-container {
background-color: yellow;
position: relative;
width: 100%;
height: 100%;
display: flex;
}
.test {
position: absolute;
transform: translate(-50%, -50%);
left: 100px;
}
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
</head>
<body>
<div class="container">
<!-- global canvas -->
<div class="row no-gutters">
<div class="col-sm">
<div class="centered-img">
<img src="./images/fssFront.png" class="img-fluid" alt="Responsive image">
<img src="./images/circle.png" class="test" alt="Responsive image">
</div>
</div>
<div class="col-sm">
<div class="centered-img">
<img src="./images/fssBack.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
</div>
<!-- global canvas -->
</body>
</html>
Как я могу расположить красный круг на вершине человека, чтобы он всегда оставался на одном месте, когда я растягиваю или сжимаю страницу?
Заранее большое спасибо.