0

Всем привет!

При скролле страницы вниз картинка залезает на футер. Как это исправить и ограничить скролл картинки границами дива? (если я думаю в правильном направлении). Линк на страницу:
http://tek.lv/index.php/ru/raschitat-smetu

Картинка имеет наложенные слои (11шт) через свойство z-index, все слои с бэкграундом находятся в отдельном диве. В зависимости от выбранных чекбоксов накладываются те или иные слои на картинку.

css для дива со слоями и фоновой картинкой:

.image-right {
    width: 50%;
    float: left;    
}

для картинок:

.my-image {
    width: 30%;
    justify-items: center;
    margin-top: 0px;
    margin-left: 20px;    
}

для слоев:

.img_layer_smeta {
    position: fixed;
    z-index: 1;
}

1 ответ 1

0

Свойство position: fixed; фиксирует элемент на экране пользователя, из-за этого и все проблемы. Уберите его.

7
  • Спасибо, убрал. После этого все отдельные слои расположились хаотично на странице. Если есть возможность посмотрите по ссылке, что получилось. Надо, чтобы картинка двигалась при скролле , но не заходила на футер. 6 дек 2020 в 15:39
  • На самом деле они расположились не хаотично, а друг за другом. Вы можете использовать свойство position: absolute, после чего подогнать картинку в нужные вам координаты, но это решение явно не гибкое, то есть при изменении размера экрана - вы столкнетесь с еще бОльшим количеством проблем.
    – Egettl
    6 дек 2020 в 15:45
  • Попробовал position:absolute; В этом случае картинка не движется вместе со скроллом :) Спасибо за комментарии! 6 дек 2020 в 15:47
  • @Новичок, если хотите, чтобы картинка двигалась за скроллом страницы, но не лезла на футер, можете использовать еще один костыль. Оставляете position: fixed и указываете margin-bottom: 300px или сколько вам там нужно, по высоте футера, тогда она на него залезать не будет, но опять же - это дикий костыль.
    – Egettl
    6 дек 2020 в 15:51
  • Попробовал, что-то ничего не изменилось. Видимо у меня там наколбашено уже сильно, без бутылки не разобраться :)) margin:bottom надо применять к .img_layer_smeta ? 6 дек 2020 в 15:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.