Как реализовать задний блок с помощью position absolute и можно ли его там закрепить?

Question

[GeorgiyStepanov]

Можно ли как реализовать задний (темно-зеленый) блок и закрепить его (то есть, чтобы он оставался на том же месте при сужении экрана)?

Comments

[Ankhena]

У вас в вопросе прям ответ.

помощью position absolute

Да. Или гридом.

чтобы он оставался на том же месте при сужении экрана

Задать ему координаты и размеры, не меняющиеся при сужении экрана.

Что именно вы делали, что получилось и в чем несоответствие с желаемым?
Песочница codepen.io

[GeorgiyStepanov]

Ankhena, https://codepen.io/goshan_207/pen/LYBGNbN?editors=1100

[Ankhena]

GeorgiyStepanov, может, стоит relative задать тому, относительно кого позиционируете? Не от вьюпорта же вам нужно?

Картинку можно заменить на любую подходящую из сервиса заглушек (например, https://picsum.photos/) или из Яндекс картинок или со своего хостинга, если по https.

Но и сейчас этот псевдо никуда не сместится. Куда прибили, там и будет.

[Ankhena]

GeorgiyStepanov, Я подозреваю, что эта ваша задача на самом деле решается обычной тенью.
А вовсе не вот то всё, что вы рассказываете в вопросе.

[GeorgiyStepanov]

Ankhena, Я задал position: relatative самой картинке, но темно-зеленого блока не видно и после этого.
P.S. Координаты из фигмы тое задал правильно.

[GeorgiyStepanov]

Ankhena, Я сделал этот "блок" с помощью тени и оно заработало. Спасибо вам огромное, уже в кторый раз вы меня выручаете)))

[Ankhena]

GeorgiyStepanov,
1. Прочитайте про тень.
2. Почитайте про работу позиционирования на MDN, Доке или любом другом удобном вам ресурсе.

Элементы с absolute позиционируются относительно ближайшего родителя с position отличным от static (т.е. если нужному родителю не нужно позиционирование, то это relative). Если такого родителя нет, то относительно окна браузера.

У img нет дочерних элементов, относительно него никого нельзя спозиционировать (ну кроме его псевдоэлементов, когда сама картинка недоступна)

[GeorgiyStepanov]

Ankhena, Понял, спасибо вам огромное!