Как позиционировать элемент чтобы он не поехал при адаптиве?

Question

[chelnokov_a]

Всем, привет.
Помогите придумать как правильно позиционировать элемент, чтобы при сужении экрана он всегда был в нужном месте.

https://pateder.ru/Development/dalos_/
Вот начало верстки.

Вот скрин макета


Суть в декоративных элементах которые как бы налезают на картинку. Бирюзовые овалы. Поместить их на нужное место не проблема. Но вот как сделать так, чтобы при сужении экрана они четко оставались на своих местах не понимаю.

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

Сейчас у меня в голове только один вариант - огромное кол-во медиа-запросов. ПАМАГИТЕ!!!

Comments

[Froggyweb]

вот это херня торчащая из меню относится к меню. позиционируется zindex

Answer 1

[fudzimaru]

Итак. рядом с
.decor-line header__line добавил еще 1 класс с такими же размерами как предыдущий, но без бекграунда в афтер вписал

.header__lin2:after {
content: '';
position: absolute;
width: 50px;
height: 100px;
right: 0;
background: red;
top: 89px;
z-index: 99;
}

.heder-banner дал
position: relative;
z-index: 2;

Получил это


Я думаю с вашими полосками проблем не будет и сделать их можно по аналогии вставив в афтер и бефор svg