@yrchi_k
учусь веб разработке

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

https://codepen.io/yrchik/pen/abbzOOY?editors=1100
Привет. Вообщем абсолют элемент начинает сьезжать после 616px . Перед этим я для .video-center img картинки указал width: 100%;
height: auto; , чтобы картинка уменьшалась пропорционально при уменьшении экрана, но теперь абсолютный .play-circle-video-wrapper cьезжать начинает при уменьшении ширины после 616px .
Как это фиксировать , чтобы в нижнем левом углу элемент оставался , несмотря на уменьшения картинки ?
  • Вопрос задан
  • 211 просмотров
Пригласить эксперта
Ответы на вопрос 2
@alexeeey_kuznetsov
Задавай положение не относительно top и right, а относительно bottom и left.
Т.е. в твоем случае надо убрать top и right вообще и поставить bottom: 0, left: 0 и дальше уже выравнивать как тебе нужно.
Ответ написан
Комментировать
TTATPuOT
@TTATPuOT
https://code.patriotovsky.ru/
Сделал только на большом видео:


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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы