Как сделать чтобы блок не двигался css

Как в блочной верстке boostrap сделать, чтобы блок не двигался?

При увеличении высоты блока wall блок frends сдвигается вниз, как мне оставить четко под блоком avatar ? (перефразирую, мне нужно чтобы при увеличении высоты блока wall , блок frends был под блоком avatar .)

Дополнение из комментариев к ответам

Мне нужно чтобы frends был прижат к avatar. Под frends будет еще один такой же блок, и он должен быть прижат к frends . А wall будет автоматически менять высоту.

Как сделать так, чтобы блоки не ехали?

Есть скрытый контент, который появляется в блоке при ховере на родителя. Так же есть некоторый padding который тоже появляется при наведении. Вследствие чего, сдвигаются другие блоки. Как сделать так, чтобы они не уезжали? Скрин ниже.

введите сюда описание изображения

Пример одного блока:

Очевидно объединять каждый ряд блоков в отдельный блок-контейнер. В любом другом случае все блоки будут сами за себя. Или сделать всем блокам абсолютное позиционирование, тогда они не будут сдвигаться со своих мест. В любом случае, это задача не для css.

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

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Фиксированный плавающий блок при прокрутке

Плагины и Шаблоны для WordPress

Доброго времени суток 🙂
Сегодня речь пойдет о одном из способов как сделать Фиксированный блок, который при прокрутке двигается с задержкой, пример видно на моем сайте справа. Еще одним несомненным плюсом является то что блок не смещается при горизонтальной прокрутке, он остается в своей зоне. Если зафиксировать обычным свойством position:fixed, то увы таких преимуществ не будет. Для меня плавное перемещение с задержкой было не особо важным, а вот то что блок остается на своем месте при горизонтальной прокрутке, это была основная задача.
В общем хватит рассуждать, давайте уже что-то делать.

1. HTML разметка

В то место где нужно чтобы блок двигался, вставляем данную разметку. Обычно это место сайдбар. Главным элементом которой является блок div с ID fixed. Можете изменить, но потом не забудьте поменять название и в javascript и в CSS, чтобы потом не было проблем.

Фиксированный блок

2. Скрипт фиксации

Как и всегда в подвале перед закрывающимся body или если вы предпочитаете, в шапке перед закрывающимся head

В четвертой строке можете установить значение Padding от верхнего края. В 11 строке если нужно меняем значение margin от верхнего края. По умолчанию они стоят 0. Просто пишите величину в пикселях, но просто цифру, например 100.

Плагины и Шаблоны для WordPress

Ставьте только цифры, обозначение в пикселях — px указывать не надо!

3. CSS стили

Далее в файле стилей style.css, добавляем следующий код.
Ширину меняйте, стили добавляйте, но position:absolute не трогайте. Это основное условие в стилях для корректного отображения фиксированного блока.

Сделав все по инструкции, результат не заставит себя ждать. Теперь можете организовать то что Вам нужно.
На этом все, спасибо за внимание 🙂

Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты 🙂

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *