Как опустить элемент вниз в css
Перейти к содержимому

Как опустить элемент вниз в css

  • автор:

Относительное позиционирование

Если задать значение relative для свойства position , то положение элемента устанавливается относительно его исходного места. Добавление свойств left , top , right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Положительное значение left определяет сдвиг вправо от левой границы элемента, отрицательное — сдвиг влево. Положительное значение top задаёт сдвиг элемента вниз (рис. 1), отрицательное — сдвиг вверх.

Значения свойств left и top при относительном позиционировании

Рис. 1. Значения свойств left и top при относительном позиционировании

Свойства bottom и right производят обратный эффект. При положительном значении right сдвигает элемент влево от его правого края, при отрицательном — сдвигает вправо (рис. 2). При положительном значении bottom элемент поднимается вверх, при отрицательном опускается вниз.

Значения свойств right и bottom при относительном позиционировании

Рис. 2. Значения свойств right и bottom при относительном позиционировании

Для относительного позиционирования характерны следующие особенности:

  • элемент можно смещать относительно исходного положения с помощью свойств left , right , top и bottom ;
  • при смещении элемента относительно исходного положения, место, которое занимал элемент, остаётся пустым и не заполняется ниже или вышележащими элементами;
  • если сдвинуть элемент вправо за пределы окна браузера, то появится горизонтальная полоса прокрутки;
  • если сдвинуть элемент вниз за пределы окна браузера, то появится вертикальная полоса прокрутки;
  • смещение элемента влево и вверх за пределы окна браузера не оказывает влияния на полосы прокрутки;
  • работает свойство z-index ;
  • этот тип позиционирования неприменим к элементам таблицы вроде ячеек, строк, колонок и др.

В примере 1 показан сдвиг текста заголовка вниз для придания ему особого стиля написания.

Пример 1. Заголовок текста

Заголовок

Аз и буки шрифтовой науки

Шрифт это средство выражения дизайна, а не какого-то банального чтения.

Результат данного примера показан на рис. 3.

Сдвиг текста относительно исходного положения

Рис. 3. Сдвиг текста относительно исходного положения

Относительное позиционирование часто применяется для создания анимации и эффектов, связанных со сдвигом элементов. В примере 2 с помощью элемента добавляется кнопка с тенью, при наведении курсора на кнопку она смещается вправо и вниз на величину тени, а сама тень при этом прячется. Всё это в комплексе придаёт кнопке трёхмерный эффект.

Пример 2. Сдвиг кнопки

Наведите курсор на кнопку, чтобы увидеть анимацию в действии. Время движения кнопки определяется свойством transition.

Для относительно позиционированных элементов работает свойство z-index , которое управляет положением элементов по оси Z. Если требуется задать наложение элементов относительно друг друга, то в стилях достаточно указать position со значением relative без смещения самого элемента. В примере 3 выводятся картинки, при наведении на них курсора они увеличиваются в размерах и отображаются поверх остальных изображений.

Пример 3. Использование z-index

z-index

Автор: Влад Мержевич
Последнее изменение: 05.08.2023

Создайте веб-страницу, показанную на рис. 1. Линии по бокам заголовка должны тянуться, независимо от размера окна браузера.

Блок с заголовком .block < background: #795548; padding: 20px; color: #fff; font-family: Arial, sans-serif; >.block h2 < color: #feea3b; overflow: hidden; font-weight: normal; margin-top: 0; text-align: center; >.block h2::before, .block h2::after < content: ''; background: #feea3b; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; >.block h2::before < right: 10px; margin-left: -50%; >.block h2::after

Апперцепция

Гештальт, как бы это ни казалось парадоксальным, понимает культурный комплекс, к тому же этот вопрос касается чего-то слишком общего.

Создайте веб-страницу, как показано на рис. 1.

Наложение body < background: #f7f6f2; margin: 0; >.bg < min-height: 200px; background: #a1bd57; >.content

См. также

  • bottom
  • left
  • position
  • position в CSS
  • relative и absolute
  • right
  • top
  • z-index
  • Абсолютное позиционирование
  • Абсолютное позиционирование и гриды
  • Добавление тени
  • Использование в вёрстке
  • Липкое позиционирование
  • Наложение элементов сетки
  • Нормальное позиционирование
  • Переходы в CSS
  • Подробнее о позиционировании
  • Поток
  • Свойства позиционирования
  • Фиксированное позиционирование

Свойство float

Свойство float в CSS занимает особенное место. До его появления расположить два блока один слева от другого можно было лишь при помощи таблиц. Но в его работе есть ряд особенностей. Поэтому его иногда не любят, но при их понимании float станет вашим верным другом и помощником.

Далее мы рассмотрим, как работает float , разберём решения сопутствующих проблем, а также ряд полезных рецептов.

Как работает float

float: left | right | none | inherit;

При применении этого свойства происходит следующее:

  1. Элемент позиционируется как обычно, а затем вынимается из документа потока и сдвигается влево (для left ) или вправо (для right ) до того как коснётся либо границы родителя, либо другого элемента с float .
  2. Если пространства по горизонтали не хватает для того, чтобы вместить элемент, то он сдвигается вниз до тех пор, пока не начнёт помещаться.
  3. Другие непозиционированные блочные элементы без float ведут себя так, как будто элемента с float нет, так как он убран из потока.
  4. Строки (inline-элементы), напротив, «знают» о float и обтекают элемент по сторонам.
  1. Элемент при наличии float получает display:block . То есть, указав элементу, у которого display:inline свойство float: left/right , мы автоматически сделаем его блочным. В частности, для него будут работать width/height . Исключением являются некоторые редкие display наподобие inline-table и run-in (см. Relationships between „display“, „position“, and „float“)
  2. Ширина float -блока определяется по содержимому. («CSS 2.1, 10.3.5»).
  3. Вертикальные отступы margin элементов с float не сливаются с отступами соседей, в отличие от обычных блочных элементов.

Это пока только теория. Далее мы рассмотрим происходящее на примере.

Текст с картинками

Одно из первых применений float , для которого это свойство когда-то было придумано – это вёрстка текста с картинками, отжатыми влево или вправо.

Например, вот страница о Винни-Пухе с картинками, которым поставлено свойство float :

Её HTML-код выглядит примерно так:

 

Текст.

Текст.

Текст.

Текст.

Каждая картинка, у которой есть float , обрабатывается в точности по алгоритму, указанному выше.

Посмотрим, например, как выглядело бы начало текста без float:

  1. Элемент IMG вынимается из документа потока. Иначе говоря, последующие блоки начинают вести себя так, как будто его нет, и заполняют освободившееся место (изображение для наглядности полупрозрачно):
  1. Элемент IMG сдвигается максимально вправо(при float:right ):
  1. Строки, в отличие от блочных элементов, «чувствуют» float и уступают ему место, обтекая картинку слева:

При float:left – всё то же самое, только IMG смещается влево (или не смещается, если он и так у левого края), а строки – обтекают справа

Строки и инлайн-элементы смещаются, чтобы уступить место float . Обычные блоки – ведут себя так, как будто элемента нет.

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

Как видно из рисунка, параграфы проходят «за» float . При этом строки в них о float’ах знают и обтекают их, поэтому соответствующая часть параграфа пуста.

Блок с float

Свойство float можно поставить любому элементу, не обязательно картинке. При этом элемент станет блочным.

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

HTML будет такой:

Винни-Пух

Кадр из советского мультфильма

Текст.

…то есть, div.left-picture включает в себя картинку и заголовок к ней. Добавим стиль с float :

.left-picture < float: left; /* рамочка и отступ для красоты (не обязательно) */ margin: 0 10px 5px 0; text-align: center; border: 1px solid black; >

Заметим, что блок div.left-picture «обернул» картинку и текст под ней, а не растянулся на всю ширину. Это следствие того, что ширина блока с float определяется по содержимому.

Очистка под float

Разберём ещё одну особенность использования свойства float .

Для этого выведем персонажей из мультфильма «Винни-Пух». Цель:

Реализуем её, шаг за шагом.

Шаг 1. Добавляем информацию

Попробуем просто добавить Сову после Винни-Пуха:

Винни-Пух

Сова

Результат такого кода будет странным, но предсказуемым:

  • Заголовок

    Сова

    не заметил float (он же блочный элемент) и расположился сразу после предыдущего параграфа

    ..Текст о Винни..

    .

  • После него идёт float -элемент – картинка «Сова». Он был сдвинут влево. Согласно алгоритму, он двигается до левой границы или до касания с другим float -элементом, что и произошло (картинка «Винни-Пух»).
  • Так как у совы float:left , то последующий текст обтекает её справа.

Шаг 2. Свойство clear

Мы, конечно же, хотели бы расположить заголовок «Сова» и остальную информацию ниже Винни-Пуха.

Для решения возникшей проблемы придумано свойство clear .

clear: left | right | both;

Применение этого свойства сдвигает элемент вниз до тех пор, пока не закончатся float’ы слева/справа/с обеих сторон.

Применим его к заголовку H2 :

Результат получившегося кода будет ближе к цели, но всё ещё не идеален:

Элементы теперь в нужном порядке. Но куда пропал отступ margin-top у заголовка «Сова»?

Теперь заголовок «Сова» прилегает снизу почти вплотную к картинке, с учётом её margin-bottom , но без своего большого отступа margin-top .

Таково поведение свойства clear . Оно сдвинуло элемент h2 вниз ровно настолько, чтобы элементов float не было сбоку от его верхней границы.

Если посмотреть на элемент заголовка внимательно в инструментах разработчика, то можно заметить отступ margin-top у заголовка по-прежнему есть, но он располагается «за» элементом float и не учитывается при работе в clear .

Чтобы исправить ситуацию, можно добавить перед заголовком пустой промежуточный элемент без отступов, с единственным свойством clear:both . Тогда уже под ним отступ заголовка будет работать нормально:

Винни-Пух

Сова

  • Свойство clear гарантировало, что будет под картинкой с float .
  • Заголовок

    Сова

    идёт после этого . Так что его отступ учитывается.

Заполнение блока-родителя

Итак, мы научились располагать другие элементы под float . Теперь рассмотрим следующую особенность.

Из-за того, что блок с float удалён из потока, родитель не выделяет под него места.

Например, выделим для информации о Винни-Пухе красивый элемент-контейнер :

Винни-Пух
Текст.

.hero

Элемент с float оказался выпавшим за границу родителя .hero .

Чтобы этого не происходило, используют одну из следующих техник.

Поставить родителю float

Элемент с float обязан расшириться, чтобы вместить вложенные float .

Поэтому, если это допустимо, то установка float контейнеру всё исправит:

.hero

Разумеется, не всегда можно поставить родителю float , так что смотрим дальше.

Добавить в родителя элемент с clear

Добавим элемент div style="clear:both" в самый конец контейнера .hero .

Он с одной стороны будет «нормальным» элементом, в потоке, и контейнер будет обязан выделить под него пространство, с другой – он знает о float и сместится вниз.

Соответственно, и контейнер вырастет в размере:

Винни-Пух
Текст.

Результат – правильное отображение, как и в примере выше. Открыть код.

Единственный недостаток этого метода – лишний HTML-элемент в разметке.

Универсальный класс clearfix

Чтобы не добавлять в HTML-код лишний элемент, можно задать его через :after .

.clearfix:after < content: "."; /* добавить содержимое: "." */ display: block; /* сделать блоком, т.к. inline не может иметь clear */ clear: both; /* с обеих сторон clear */ visibility: hidden; /* сделать невидимым, зачем нам точка внизу? */ height: 0; /* сделать высоту 0, чтобы не занимал место */ >

Добавив этот класс к родителю, получим тот же результат, что и выше. Открыть код.

overflow:auto/hidden

Если добавить родителю overflow: hidden или overflow: auto , то всё станет хорошо.

.hero

Этот метод работает во всех браузерах, полный код в песочнице.

Несмотря на внешнюю странность, этот способ не является «хаком». Такое поведение прописано в спецификации CSS.

Однако, установка overflow может привести к появлению полосы прокрутки, способ с псевдоэлементом :after более безопасен.

float вместо display:inline-block

При помощи float можно размещать блочные элементы в строке, похоже на display: inline-block :


  
  • Картинка 1
  • Картинка 2
  • Картинка 3
  • Картинка 4
  • Картинка 5
  • Картинка 6
  • Картинка 7
  • Картинка 8
  • Картинка 9
  • .gallery li

    Элементы float:left двигаются влево, а если это невозможно, то вниз, автоматически адаптируясь под ширину контейнера, получается эффект, аналогичный display: inline-block , но с особенностями float .

    Вёрстка в несколько колонок

    Свойство float позволяет делать несколько вертикальных колонок.

    float:left + float:right

    Например, для вёрстки в две колонки можно сделать два . Первому указать float:left (левая колонка), а второму – float:right (правая колонка).

    Чтобы они не ссорились, каждой колонке нужно дополнительно указать ширину:

    Шапка
    .column-left < float: left; width: 30%; >.column-right < float: left; width: 70%; >.footer

    Результат (добавлены краски):

    body, html < margin: 0; padding: 0; >.column-left < float: left; width: 30%; >.column-right < float: left; width: 70%; overflow: auto; /* расшириться вниз захватить float'ы */ >.footer < clear: both; >.inner
    Шапка

    Персонажи:

    • Винни-Пух
    • Ослик Иа
    • Сова
    • Кролик
    Винни-Пух

    Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.

    В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.

    Низ

    В эту структуру легко добавить больше колонок с разной шириной. Правой колонке можно было бы указать и float:right .

    float + margin

    Ещё вариант – сделать float для левой колонки, а правую оставить в потоке, но с отбивкой через margin :

    .column-left < float: left; width: 30%; >.column-right < margin-left: 30%; >.footer

    Результат (добавлены краски):

    body, html < margin: 0; padding: 0; >.column-left < float: left; width: 30%; >.column-right < margin-left: 30%; width: 70%; overflow: auto; /* расшириться вниз захватить float'ы */ >.footer < clear: both; >.inner
    Шапка

    Персонажи:

    • Винни-Пух
    • Ослик Иа
    • Сова
    • Кролик
    Винни-Пух

    Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.

    В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.

    Низ

    В примере выше – показана небольшая проблема. Колонки не растягиваются до одинаковой высоты. Конечно, это не имеет значения, если фон одинаковый, но что, если он разный?

    В современных браузерах (кроме IE10-) эту же задачу лучше решает flexbox.

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

    Позиция

    Используйте эти сокращенные утилиты для быстрой настройки положения элемента.

    Общие значения

    Здесь доступны классы быстрого позиционирования, хотя они не обладают «отзывчивым» поведением.

     class="position-static">.  class="position-relative">.  class="position-absolute">.  class="position-fixed">.  class="position-sticky">. 

    Прикрепленный сверху

    Располагайте элемент вверху области видимости, от края до края. Удостоверьтесь, что понимаете последствия фиксированной позиции элемента для вашего проекта, вам может потребоваться добавить некий CSS.

     class="fixed-top">. 

    Прикрепленный внизу

    Позиционируйте элемент у нижнего края области видимости, от края до края. Удостоверьтесь, что понимаете последствия фиксированной позиции элемента для вашего проекта, вам может потребоваться добавить некий CSS.

     class="fixed-bottom">. 

    «Липкий» верх

    Позиционируйте элемент у нижнего края области видимости, от края до края, но только после того, как область видимости прокрутится после него. Класс .sticky-top использует position: sticky , который поддерживается не всеми браузерами.

    IE11 и IE10 отрисуют position: sticky как position: relative . Поэтому мы обернули стили в очередь @supports , что применяет «липкость» лишь к браузерам, которые отрисуют ее правильно.

     class="sticky-top">. 

    Как прижать элемент к низу или верху родительского элемента

    Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!

    Здравствуйте! В сегодняшней короткой и сугубо практической статье я расскажу, как прижать, к примеру, div к низу другого div. Всё дело в том, что по одноименному запросу в своё время я не смог найти нужных мне ответов, поэтому сейчас я расскажу вам обо всех возможных способах сделать это.

    Допустим, у нас есть 2 элемента на странице, неважно какие именно, для примера возьмём 2 div. Один из них будет вложен в другой, причём высота родителя будет больше высоты ребёнка:

     #parent < background:black; height:300px; >#child 
    Текст дочернего элемента

    Для красоты и наглядности я сделал дочерний элемент квадратным:

    Красный квадрат

    Способ №1. Абсолютное позиционирование

    Используем абсолютное позиционирование и при этом не забываем, что родительский элемент обязательно должен иметь позицию relative:

      
    Текст дочернего элемента

    абсолютное позиционирование

    Это значит что в таком случае:

     #parent < background:black; height:300px; >#child,#child2,#child3< display:inline-block; /* Сделали все div в одну строку */ height:100px; width:100px; > #child < background:red; >#child2 < background:yellow; >#child3 
    Текст дочернего элемента 1
    Текст дочернего элемента 2
    Текст дочернего элемента 3

    div в одну строку

    После проделанного выше способа получиться следующее:

    элементы друг на друге

    Все элементы легли друг на друга, так как они не понимают, что существуют другие элементы, кроме них самих. В результате последний div (зелёный) оказался выше всех, в то время как первый (красный) ниже всех.

    Конечно, кто-то может поспорить и сказать, что мы можем выставить у каждого div разную велечину left, например так:

      
    Текст дочернего элемента 1
    Текст дочернего элемента 2
    Текст дочернего элемента 3

    CSS свойство left

    Вроде всё отлично, зачем же нам делать как-то по-другому? Во-первых, как я уже говорил, для других элементов на странице наших абсолютно позиционированных блоков с текстом просто не существует, это может поломать вашу вёрстку.

    Но это ерунда, куда важнее универсальность и рациональность. Поясняю, пользуясь способом №1 мы должны:

    Способ №2. Вертикальное выравнивание

    Этот способ подойдёт в том случае, если, к примеру, у родителя не задана высота, в то время как все дочерние элементы имеют разные высоты:

     #parent < background:black; >#child,#child2,#child3 < display:inline-block; >#child < background:red; height:300px; width:100px; >#child2 < background:yellow; height:100px; width:100px; >#child3 
    Текст дочернего элемента 1
    Текст дочернего элемента 2
    Текст дочернего элемента 3

    Вертикальное выравнивание

    Всё что нужно, чтобы это исправить – дописать всего лишь одну строчку:

     #parent < background:black; >#child,#child2,#child3< vertical-align:bottom; /* вот она */ display:inline-block; > #child < background:red; height:300px; width:100px; >#child2 < background:yellow; height:100px; width:100px; >#child3 
    Текст дочернего элемента 1
    Текст дочернего элемента 2
    Текст дочернего элемента 3

    vertical-align

    1) Для того, чтобы применить вертикальное выравнивание (vertical-align), элементы ни в коем случае не должны иметь свойство float.
    2) В отличие от предыдущего способа, нам без разницы, какую позицию (relative, absolute и тд.) будет иметь родитель, поэтому её можно просто не писать, по умолчанию она static.

    Как прижать элементы к верху родительского

    Обратная ситуация. Допустим нам нужно прижать div к верху родительского элемента.

    Такая необходимость может появиться, например, если у вас внутри дочерних элементов высота регулируется не в CSS, а объёмом текста:

     #parent < background:black; >#child,#child2,#child3 < width:100px; display:inline-block; >#child < background:red; >#child2 < background:yellow; >#child3 
    Много, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста. Текст дочернего элемента 1
    Мало текста, мало текста. Текст дочернего элемента 2
    Средне текста, средне текста, средне текста, средне текста, средне текста. Текст дочернего элемента 3

    top

    Чтобы это исправить, и прижать все элементы к верху родительского, нам необходимо задать свойство vertical-align в значение top:

     #parent < background:black; >#child,#child2,#child3< vertical-align:top; /* top */ width:100px; display:inline-block; > #child < background:red; >#child2 < background:yellow; >#child3 
    Много, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста, много текста. Текст дочернего элемента 1
    Мало текста, мало текста. Текст дочернего элемента 2
    Средне текста, средне текста, средне текста, средне текста, средне текста. Текст дочернего элемента 3

    результат

    Вот и всё, спасибо за внимание. На востоке Украины сегодня пасмурно, но, несмотря на это желаю всем только солнечной погоды в ваших делах, удачи!

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

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