Есть ли способ фиксации элемента относительно родителя при изменении ширины экрана?

Question

[ognivushka]

Здравствуйте, если быть точной, у меня есть картинка и на ее фоне есть элемент дизайна. По дизайну должен быть все время посередине картинки, даже, когда она адаптивно уменьшается при изменении ширины экрана. Этот элемент находится в абсолютной позиции относительно картинки, но все равно убегает вправо) Может кто-то знает способ зафиксировать его?

Comments

[fff ttt]

а можно скрин?

[ognivushka]

[cssfish]

без кода неясно что у вас там происходит и почему

[ognivushka]

cssfish, а дело в том, что кода пока что нет) я пробую найти какой-то вариант, при котором эти точки всегда находятся в этом месте на картинке. Если он есть...)

[cssfish]

ognivushka, как кода нет ,если пишите что убегает вправо?
а сделать точки снизу посередине можно как угодно. например обернву картинки и точки в див с relative, а блоку с точками дать absolute и центрировать

[Вадим]

ognivushka, судя по скриншоту - это слайдер.
Картинка отдельно, точки отдельно, но лежат в каком-то общем контейнере.
В зависимости от требований, картинка может задавать размеры блоку, или расстягиваться под размеры блока.
А точки, она же навигация и переключатель изображений - позиционируются относительно общего с картинкой родительского контейнера через position: absolute.

[ognivushka]

Вадим, сделала так как вы написали, но точки все равно смещаются в право, хоть и не выходят за пределы фотографии.Вот css: .hero-photos {
position: relative;
}

.hero-img {
width: 100%;
}

.squares {
display: flex;
gap: 5px;
position: absolute;
left: 360px;
bottom: 20px;
}

.square {
width: 6px;
height: 6px;
background-color: rgba(255, 255, 255, 0.411);
}

Я в вопросе имела в виду способ, при котором они будут неподвижны относительно картинки. Но, возможно, что-то сделала неправильно)

[Вадим]

ognivushka, Ну так Вы указываете left: 360px. Соответственно, они всегда слева 360px и занимают, а картинка то уменьшается. Соответтсвенно, на картинке по меньше уже нужно не 360, а скажем, 240 пикселей и тд.
Указывайте в процентах.
Если хотите по середине. то нужно left: 50% и transform: translateX(-50%)

[ognivushka]

Вадим, спасибо большое, дошло;)

Answer 1

[Максим Зайцев]

Не знаю так ли я понял... Вам нужно, чтобы при уменьшении одного объекта, объект который в центре родителя тоже должен уменьшаться/сдвигаться как и родитель? Я бы сделал так, сделал бы блок (допустим div) задал бы ему бэкграунда ту самую картинку и в этот div повестил бы тот самый элемент дизайна, div имел бы position: relative, а тот элемент дизайна position: absolute... И тогда бы уже настроил его (элемент дизайна) по центру блока с картинкой в виде бэкграунда. Надеюсь помог, если нет пишите, может я просто не понял ваш вопрос...