Member 14976864 Ответов: 1

Как удержать Изображение от перемещения на разных размерах экрана, используя абсолютное положение?


https://jacobrishe.github.io/ Вот мой сайт, и вы увидите, когда откроете его, моя картинка может перемещаться в зависимости от размера экрана, на котором вы ее открываете. Как мне удержать свое изображение от движения? Вот мой код ниже.

.модель {

положение: абсолютное;

высота: 70%;

дно: 15%;

слева: 60%;

преобразование: translateX(-70%);

}



u/media only screen and (min-width : 1824px) {

.модель {

высота: 65%;

дно: 30%;

слева: 55%;

}

}



u/media screen и (максимальная ширина: 1250px) {

.модель {

высота: 500px;

дно: 100 Пикс.;

слева: 65%;

преобразование: translateX(-80%);

прокладка-дно: 100px;

}

}

Что я уже пробовал:

Я изменил положение с абсолютного на относительное, но это испортило расположение моей картины и слов.

Anurag Gandhi

Попробуйте положение: фиксированное;

Member 14976864

Спасибо, что ответили Анурагу! Однако, когда я перемещаю положение в фиксированное, изображение перемещается вниз по мере прокрутки вниз.

1 Ответов

Рейтинг:
0

W∴ Balboos, GHB

Основная проблема, с которой вы столкнулись, заключается в том, что "Абсолют" действительно имеет смысл только в том случае, если вы даете абсолютное значение для местоположения.

Вы используете % - который по определению является относительным, во всех ваших стилевых блоках, кроме when.

позиция:фиксированная полезна только в том случае, если вы хотите, чтобы элемент оставался там, где он есть, даже если экран прокручивается - очень возможно, так как вы работаете с несколькими размерами экрана.

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


W∴ Balboos, GHB

Мои вещи на работе в основном абсолютны или полу-абсолютны. Последние, div-элементы, которые содержат внутренние компоненты, которые являются абсолютными, и их местоположение ... зависит. Это произошло изначально, потому что рабочее место было разделено между FireFox и IE7 (сначала) - теперь это просто FireFox, но для того, чтобы я мог работать на страницах, я обратился к абсолютному позиционированию - и довольно привык к нему.

Поскольку все мои страницы рождаются из php, у меня есть удобство создания страниц, которые могут вычислять расстояния/позиции, чтобы все всегда подходило.

Вам не нужно объявлять свой тип позиционирования для каждого элемента. Теперь я понимаю, что % - это очень заманчиво. Я обнаружил, что некоторые другие стили, похоже, не работают без реальной ценности. Я живу в px land, но существуют некоторые новые, которые мне действительно следует изучить.

Здесь нет простого ответа: я просто нашел https://web.dev/min-max-clamp/ и, казалось бы, можно было бы выступить в качестве альтернативы медиа-стилям, каждый из которых имеет свои ценности. Некоторые места дают "лучшие практики" - я говорю - вы сами опыт и образ мышления создадите свои собственные практики. Я люблю столы - и мне наплевать, что они хотят, чтобы ты использовал вместо них дивы.

Вы должны играть с этим материалом, пока не разовьете свои инстинкты (действительно знание, которое просто течет).

Последнее: для этого или любого другого вопроса: если вы получите свой ответ, отметьте его "принято", чтобы он не привлекал внимания.