Как спозиционировать блочный div относительно строчного img?

Question

Подскажите пожалуйста, как мне правильно спозиционировать div относительно изображения?

Ведь img это строчный элемент, а div блочный, задаю img position: relative, а div position: absolute, но это не работает, потому что див должен быть внутри, но это не возможно же сделать. Псевдоэлементом думал, но тоже не вариант, ведь у меня целый div.

Answer 1

*{
margin: 0;
padding: 0;
}



.container{
margin: 0 auto;
width: 500px;
border: 1px solid gray;
position: relative;
}

img{
width: 50%;
display: block;

}

.one{
border: 4px solid black;
width: 20%;
height: 40%;
position: absolute;
left: 17%;
top: 10%;
}

    <div class="container">
        <div class = "one"></div>
        <img src="https://lifetimemix.com/wp-content/uploads/2021/06/1800x1200_cat_relaxing_on_patio_other.jpg" alt=""> 
    </div>

Если я правильно понял -_-

БЛОГ НА HUSL

Как спозиционировать блочный div относительно строчного img?

Ответы (1 шт):