Абсолютный элемент начинает cьезжать с картинки при уменьшении ширины экрана. Как исправить?

Question

[Юра Сторчака]

https://codepen.io/yrchik/pen/abbzOOY?editors=1100
Привет. Вообщем абсолют элемент начинает сьезжать после 616px . Перед этим я для .video-center img картинки указал width: 100%;
height: auto; , чтобы картинка уменьшалась пропорционально при уменьшении экрана, но теперь абсолютный .play-circle-video-wrapper cьезжать начинает при уменьшении ширины после 616px .
Как это фиксировать , чтобы в нижнем левом углу элемент оставался , несмотря на уменьшения картинки ?

Answer 1

[alexeeey_kuznetsov]

Задавай положение не относительно top и right, а относительно bottom и left.
Т.е. в твоем случае надо убрать top и right вообще и поставить bottom: 0, left: 0 и дальше уже выравнивать как тебе нужно.

Answer 2

[Антон Неверов]

Сделал только на большом видео:


Вы если и используете абсолютное позиционирование, то всегда продумывайте то, от чего будет отталкиваться такой элемент. В вашем случае элемент расположен слева снизу. Вот и отталкиваться он должен от левого края и от нижнего. Не от верхнего, это банально не логично.

+ вы должны понимать, что абсолютное позиционирование отталкивается от ближайшего родителя с position: relative. Поэтому в вашем случае элемент должен толкаться от левого нижнего края картинки. Соответственно, блок с картинкой должен быть с position: relative.

Читайте больше про абсолютное позиционирование: htmlbook.ru/css/position

Comments

[Юра Сторчака]

спасибо , я уже разобрался