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

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

CSS-свойство position: разбираемся с позиционированием элементов

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «A painless guide to understanding CSS positioning».

Photo by Blue Bird from Pexels

Если вы хотите действительно хорошо овладеть CSS, очень важно разобраться в свойстве position . Но стоит учесть, что для начинающих эта тема может быть довольно сложной.

Создавая свое портфолио, я обнаружил, что у меня нет понимания свойства position . Я просто случайным образом применял различные комбинации значений, пока не достигал приемлемого для себя эффекта. Но по большей части все, что я писал, приходилось стирать.

В этой статье я постараюсь избавить вас от подобных мучений. Я расскажу о каждом из значений CSS-свойства position и покажу, как они работают.

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

Поточная раскладка

То, как элементы отображаются на странице, называется нормальным потоком или поточной раскладкой. Это расположение элементов по умолчанию. Поток — это все элементы вашей страницы, «работающие» вместе и знающие о наличии остальных элементов.

CSS трактует каждый HTML-элемент как отдельный блок (возможно, вы слышали о понятии «блочная модель»). Элементы блочного уровня (заголовки, абзацы или блоки div ) по умолчанию начинаются как бы с новой строки. А строчные (inline) элементы (например, изображения и элементы span ), отображаются в строке вместе с другим контентом. Такое отображение элементов принято по умолчанию и называется нормальным потоком документа. Но CSS дает нам мощный инструмент для перезаписи нормального потока — свойство position .

Давайте рассмотрим, что оно делает.

Свойство position

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

Свойство position имеет пять возможных значений:

1. static (статическое позиционирование)
2. relative (относительное)
3. absolute (абсолютное)
4. fixed (фиксированное)
5. sticky (липкое)

Мы разберем все 5 значений, но сначала обратим внимание на свойства расположения.

Свойства расположения

Само по себе свойство position не слишком-то много и может. Чтобы указать, где именно в документе нужно расположить элемент, мы используем свойства расположения (это не официальное название, это я их так называю). Этих свойств четыре:

• top (верх)
• left (слева)
• right (справа)
• bottom (низ)

Значения этих свойств определяют, насколько позиция элемента должна сместиться и в каком направлении (вверх, вниз, влево, вправо). Чуть позже мы все это разберем на примерах.

Значения свойства position

Статическое позиционирование

static — это дефолтное значение свойства position . Оно предполагает, что элементы на странице отображаются в нормальном потоке. Свойства top , left , bottom и right не влияют на элемент, имеющий position: static .

Несмотря на то, что это дефолтное значение, оно может задаваться явно. Например, когда вам нужно перезаписать значение position , установленное где-то еще (и унаследованное вашим элементом).

Давайте рассмотрим пример. На нем мы увидим, что указание position: static никак не влияет на отображение элемента.

Здесь у нас три блока div , каждый из которых находится в родительском контейнере с классом box-original .

Давайте добавим position: static для div с классом box-2 и зададим также значения для свойств top и left .

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

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

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

Относительное позиционирование означает, что элемент позиционируется относительно своей исходной позиции в нормальном потоке. Если просто задать элементу position: relative , ничего не произойдет. Для изменения позиции нужно задать свойства расположения.

В общем, если вы просто задаете элементу position: relative , он остается в нормальном потоке. Но при помощи свойств расположения вы можете его сдвинуть. Давайте рассмотрим пример.

Возьмем код из прошлого примера и заменим position: static на position: relative .

Фиолетовый квадрат сдвинулся со своей нормальной позиции (обозначена серым квадратом). В этом примере задано смещение на 10px от верха и от левого края этого же элемента в дефолтном положении (т. е. смещение вниз и вправо).

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

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

При абсолютном позиционировании элементы изымаются из нормального потока документа, а пространство, которое они занимали, больше не резервируется за ними. То есть их как бы вообще здесь нет.

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

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

Это очень важный момент. Если ближайший родительский элемент не имеет указанного свойства position , элемент с абсолютным позиционированием будет позиционироваться относительно следующего в иерархии родительского элемента, имеющего это свойство. Если у элемента вообще не будет позиционированных предков, он будет позиционироваться относительно элемента html или viewport. Не зная этого, можно долго ломать голову, почему все работает не так, как задумано.

Элемент с абсолютным позиционированием можно перемещать как угодно. При помощи свойств top , left , bottom и right вы можете определить, где должен находиться этот элемент относительно его позиционированного предка (первого в иерархии среди имеющих значение position , отличное от static ).

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

Вы видите, что в документе не создалось пустого места для нашего элемента. Фактически это место схлопнулось, и другие элементы ведут себя так, будто на этом месте вообще ничего никогда не было. Так происходит потому, что наш элемент теперь позиционируется относительно элемента parent-box .

Photo by Blue Bird from Pexels

Фиксированное позиционирование

Фиксированное позиционирование работает подобно абсолютному. Оно удаляет элемент из нормального потока документа, причем под этот элемент в раскладке больше не отводится никакого места.

Элементы с фиксированным позиционированием позиционируются относительно viewport. (Viewport — это видимая пользователю область веб-страницы, то, что может увидеть пользователь, не прибегая к прокрутке, — MDN).

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

Давайте изменим позиционирование box-2 с position: absolute на position: fixed . Также мы изменим значение свойства top на 0 и удалим значение свойства left . Еще мы добавим несколько дополнительных блоков, чтобы увидеть эффект при прокрутке.

Как видите, фиолетовый блок теперь зафиксирован вверху страницы. Мы добились такого эффекта, установив для него position: fixed и top: 0px .

При использовании position: fixed важно помнить, что элемент будет постоянно занимать какое-то место в зоне просмотра. Это может негативно сказаться на пользовательском опыте, особенно на мобильных устройствах, где пространство ограничено. Так что обдумывайте, как все будет выглядеть на разных устройствах.

Липкое позиционирование

Липкое позиционирование — это позиционирование согласно нормального потока документа, но также это смесь относительного и фиксированного позиционирования. Я имею в виду, что элемент ведет себя как относительно позиционированный, пока страница при прокрутке не достигает заданной точки — и тогда элемент начинает вести себя, как элемент с фиксированной позицией.

Давайте рассмотрим новый пример. Мы зададим dt свойство position: sticky и top: 3px (т. е. смещение на 3px от верха страницы).

Попробуйте прокрутить страницу, и увидите, как работает липкое позиционирование.

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

Работать с липким позиционированием надо осторожно, потому что не все браузеры его поддерживают (по крайней мере, на момент написания статьи). Проверить поддержку можно при помощи caniuse.com.

Где во всем этом место Z-индекса?

z-index — это CSS-свойство, позволяющее задавать порядок позиционированных элементов по оси z. Любой элемент, которому вы задали свойство position , отличное от static , может позиционироваться и по оси z.

Оси координат

В целом, z-index позволяет контролировать порядок расположения и, таким образом, перекрытие элементов. С его помощью вы определяете, какие элементы должны стоять на переднем плане, а какие — сзади.

Элементы с большим значением z-index отображаются перед элементами с меньшими значениями.

Рассмотрим пример. Я покажу, что при использовании z-index порядок элементов в html-разметке не имеет значения, мы можем сменить их позицию с передней на заднюю.

Мы зададим каждому классу box позицию fixed , что позволит нам изменить z-index каждого из box -элементов.

See the Pen Z-index by Peter (@pin0s) on CodePen.

Как видите, элементы с более высоким значением z-index идут на переднем плане, а с более низким — на заднем.

Заключение

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

Мы можем применять пять значений свойства position :

Положение элемента задается при помощи свойств top , left , bottom и right . Значения этих свойств указывают, насколько должен сместиться элемент от указанной точки.

Если элемент позиционирован, причем значение position — не static , можно задавать положение этого элемента по оси z. Это делается при помощи свойства z-index . Чем выше значение этого свойства, тем ближе к переднему плану выводится элемент. Элементы с более низкими значениями z-index выводятся на заднем плане.

Самый лучший способ разобраться в CSS-свойстве position — поиграться с ним. Возьмите пены, приведенные здесь в качестве примеров, попробуйте поменять в них какие-нибудь значения и посмотрите, к чему это приведет.

position

Позиционирование задаётся с помощью свойства position. Свойство может иметь пять значений:

— нормальное (статичное) позиционирование — относительное позиционирование — абсолютное позиционирование — фиксированное позиционирование — липкое позиционирование

Свойство position не наследуется, так что для дочерних элементов его требуется указывать явно.

Свойство z-index работает только для элементов, у которых position задано как relative, absolute или fixed.

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

Создадим заготовку — один контейнер, в котором разместим три блока.

Нормальное позиционирование: static

Нормальное (статичное) позиционирование — это обычное поведение блочных элементов в том порядке, в котором они прописаны в коде сверху вниз. Его не нужно прописывать, потому что оно стоит по умолчанию. Но иногда position: static используют, чтобы отменить другой вид позиционирования при определённых событиях на веб-странице в сценариях JavaScript или в эффектах CSS для возврата к начальному значению (например, в свойстве :hover).

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

• элементы выводятся в том порядке, как они описаны в коде
• свойства left, right, top, bottom, z-index не работают, применять их нет смысла

Наша заготовка как раз использует нормальное позиционирование и здесь всё понятно.

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

Относительное позиционирование записывается так – position: relative. Изменяет положение элемента от его исходного расположения. Координаты задаются такими же свойствами, как и при абсолютном позиционировании — left, right, top, bottom. Единственное существенное отличие заключается в том, что элемент формально не выпадает из потока – под него остаётся место.

Работу этого значения можно сравнить с visibility: hidden, когда элемент скрывается со страницы, но место под него остаётся нетронутым. Блок можно двигать куда угодно, но место под него остаётся пустым и его не займут другие части.

Если элемент выходит за пределы окна браузера, то появится горизонтальная или вертикальная полосы прокрутки.

Помните, что смещение происходит не от краёв окна браузера, а от того места, где изначально стоял блок.

Допустим мы хотим сместить первый дочерний элемент влево и вниз.

Первый блок сдвинется вправо на 20 пикселей. При этом его правая часть выходит за пределы родительского контейнера, а нижняя часть налезает на второй блок, частично перекрывая его. Кстати, можно задавать и отрицательные значения.

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

При задании подобного позиционирования элемент перестаёт существовать в потоке документа и его положение задаётся относительно краёв браузера или родительского окна.

Ширина элемента, если она не задана явно, определяется шириной содержимого с учётом padding, border и margin. Элемент не меняет своё исходное положение, если у него нет свойств right, left, top и bottom. Одновременно указанные свойства left и right формируют ширину элемента, но только если width не указано. Если добавить свойство width, то значение right будет проигнорировано. Аналогично с высотой элемента при использовании свойств top, bottom и height.

Свойства left и top имеют более высокий приоритет по сравнению с right и bottom. Если left и right противоречат друг другу, то значение right игнорируется. То же самое касается и bottom.

Если left задать отрицательное значение, то элемент уйдёт за левый край браузера, но полоса прокрутки при этом не появится. Аналогично со свойством top, когда элемент уходит за верхний край.

Если left задать значение больше ширины видимой области или указать right с отрицательным значением, то появится горизонтальная полоса прокрутки. Аналогично и с top — появится вертикальная полоса прокрутки.

Элемент перемещается вместе с документом при его прокрутке. Свойство z-index работает, при этом абсолютно позиционированные элементы перекрывают статичные элементы, даже если они в коде ниже.

Абсолютное позиционирование позволяет скрывать элементы. Для этой цели часто добавляется стиль left: -9999px, который переносит элемент далеко влево за область просмотра. В частности, этот приём используется для стилизации переключателей и флажков, когда скрывают настоящий флажок, а вместо него стилизуют элемент label, связанный с input и выполняющим его функции.

Применим абсолютное позиционирование к первом блоку.

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

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

Сюрприз! Блок разместился в указанной позиции относительно окна браузера, а не своего родительского контейнера, так как на самом деле блок выпал из него. Это справедливо, если родительский блок имеет статичное позиционирование (static), которое в нашем случае опущено, так как используется по умолчанию.

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

Запоминаем связку: родитель (относительное) — дочерний (абсолютное). По умолчанию перемещение происходит относительно сторон окна браузера, но если у родительского элемента задано position: relative, то произойдёт смена системы координат и смещение происходит относительно родительского блока. Значения padding не учитываются.

На самом деле, родительский блок мог иметь любые другие значения, кроме static. Если попробовать связку absolute-absolute, то ничего не изменится.

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

Фиксированное позиционирование: fixed

Фиксированное позиционирование по своему действию похоже на абсолютное позиционирование, но в отличие от него привязывается к указанной позиции свойствами left, top, right и bottom и не меняет своего положения при прокрутке веб-страницы.

Распространённый вариант, когда при прокрутке элемент словно приклеивался к одному месту. Например, часто используется в шапке сайта. Для этого нужно записать:

По поведению фиксированное смещение схоже с абсолютным – элемент выпадает из нормального потока, его место освобождается и другие элементы вообще его не замечают. С помощью такого приёма можно очень легко сделать верхние, нижние, боковые панели на странице, которые не будут исчезать при прокрутке и всегда будут находиться на виду.

Также может использоваться для вывода диалоговых окон — при этом фиксированное сообщение невозможно прокрутить вверх или вниз, оно всегда остаётся на своём месте.

Липкое позиционирование — sticky

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

CSS: Позиционирование

Позиционирование — это управление местом расположения (позицией) элемента на веб-странице, оно контролируется с помощью CSS свойства position .

Для указания точного места расположения позиционированных элементов, используются CSS свойства: top, right, bottom и left. Они работают со всеми позиционированными элементами, кроме статических.

Элементы могут перекрывать друг друга!

Отображение элемента над остальными!

Свойство position имеет 4 значения: static , fixed , relative и absolute . Каждое из этих значений будет продемонстрировано ниже с примером использования.

Перед тем как подробно разобрать все виды позиционирования элементов на странице, нам придется рассмотреть, что такое поток документа.

Поток документа

По умолчанию элементы на веб-странице отображаются в том порядке, в котором они представлены в HTML-документе, т. е. блочные элементы занимают всю доступную для них ширину и укладываются вертикально один под другим. Строчные элементы выстраиваются по горизонтали до тех пор, пока не будет занята вся доступная ширина, после того как вся ширина будет занята, будет сделан перенос строки и всё пойдет по новой. Такой порядок расположения элементов называется нормальным потоком (его также называют потоком документа или общим потоком ).

С помощью свойства float или position можно убрать элемент из нормального потока. Если элемент «выпадает» из нормального потока, то элементы, которые расположены в коде ниже этого элемента будут смещены на его место на веб-странице.

Статическое позиционирование

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

При применении CSS свойств top , left , right или bottom к статически позиционированному элементу, они будут игнорироваться.

Если есть необходимость, то можно задать статическое позиционирование в таблице стилей с помощью значения static :

Фиксированное позиционирование

Элементы с фиксированным позиционированием располагаются на странице относительно окна браузера. Такие элементы удаляются из общего потока, элементы, следующие в потоке за фиксированным элементом, будут игнорировать его, смещаясь и занимая его место на веб-странице.

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

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

Элементы с относительным позиционированием, как и статические элементы, остаются в общем потоке. При применении свойств top , left , right или bottom к относительно позиционированным элементам, они будут смещаться относительно своего местоположения, оставляя пустое пространство там, где элемент располагался изначально.

Такие элементы не влияют на расположение окружающих их элементов, остальные элементы остаются на своих местах и могут быть перекрыты относительно позиционированным элементом:

Примечание: элементы с относительным позиционированием ( relative ) обычно используют в качестве родителя для элементов с абсолютным позиционированием ( absolute ).

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

Элементы с абсолютным позиционированием полностью удаляются из общего потока, остальные элементы будут занимать освободившееся пространство, полностью игнорируя абсолютно позиционированные элементы. Затем можно позиционировать элемент в любое нужное место веб-страницы, используя свойства top , left , right или bottom .

Все абсолютно позиционированные элементы размещаются относительно окна браузера или относительно ближайшего позиционированного предка (если он есть), у которого свойство position имеет значение absolute , fixed или relative .

Перекрывающие элементы

Когда элементы находятся вне общего потока страницы, они могут перекрывать друг друга. Обычно порядок расположения элементов соответствует их порядку в HTML-коде страницы, однако есть возможность управлять порядком перекрытия с помощью CSS свойства z-index, чем больше его значение, тем выше будет элемент.

Позиционирование HTML элементов в CSS при помощи свойства position (absolute, relative, fixed, static)

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Настало время дополнить «Учебник CSS» новыми полезными материалами и сегодня мы познакомимся с тем, каким образом можно разнообразить размещение различных элементов на странице, применив для них свойство позиционирования position с различными параметрами (static, relative, absolute, fixed).

Также в рамках озвученной выше темы рассмотрим, как можно задавать тот или иной отступ вправо, влево, вверх или вниз посредством использования соответствующих свойств left, right, top и bottom путем присвоения им нужных числовых значений.

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

Определение позиции элемента и нормальное позиционирование (position static)

Для свойства position существует четыре значения (static | relative | absolute | fixed), которые и определяют способ позиционирования. Как вы, наверное, знаете, параметры практически всех CSS правил можно почерпнуть с официальной странички спецификации W3, где представлен полный набор свойств и их значений, в том числе position:

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

При помощи position и упомянутых мною выше left, right, top, bottom (отступы соответственно влево, вправо, вверх, вниз) можно регулировать положение элементов один относительно другого, фиксировать их в определенном месте или даже производить наложение одного элемента на другой.

Более того, позиционированием можно управлять посредством скриптов. Это дает возможность придать любому элементу динамику, а также создать анимационные и другие эффекты.

В том случае, если position отсутствует или оно имеет значение static, элемент отображается в обычном порядке как составная часть HTML потока. То есть все составные части вебстраницы выводятся в той последовательности, которая присутствует в исходном коде страницы.

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

Position absolute (абсолютное позиционирование)

Итак, продолжим разбор технических нюансов абсолютным позиционированием, которое определяется параметром absolute свойства position:

Важно понимать, что в данном случае элемент не будет отображаться в стандартном потоке. Соответственно у нас появляется возможность определить его местоположение в абсолютной системе координат, задав отступы от краев окна браузера посредством left, right, top, bottom:

Здесь A, B, C и D — числовые величины отступов. Теперь разберем особенности значения absolute на конкретном примере. Возьмем 2 контейнера DIV с соответствующими ID (идентификаторами), которым пропишем параметры background-color (цвет фона), width (ширину) и height (высоту). Для простоты воспользуемся способом внутренних стилей, который реализуется при помощи атрибута style.

В отличие от связанных стилей, являющихся на практике наиболее оптимальными, этот метод предусматривает размещение правил CSS не в отдельном файлике, а в виде значений атрибута STYLE, приписываемых нужному тегу. При этом для чистоты эксперимента пока position absolute добавлять не будем:

Чуть выше я уже сказал, что отсутствие position по умолчанию равнозначно тому, что для этого свойства указан параметр static. То есть отображение всех элементов происходит в обычной последовательности. Соответственно в нашем случае контейнеры будут располагаться по порядку (в стандартном HTML потоке):

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

Далее добавляем position absolute к списку стилей верхнего элемента. В результате получаем такую картину, которая наглядно показывает, как работает это правило:

Что же произошло? После применения абсолютного позиционирования к определенному элементу все остальные блоки вебстраницы перестают его «замечать» и ведут себя так, словно его нет. Причем мы пока не указали величины смещения с помощью left, right, top и(или) bottom.

А в этом случае после применения к нему параметра absolute вебэлемент остается на месте, в то время как его сосед (в нашем примере нижний подкрашенный блок) перемещается вверх. В результате осуществляется наложение одного элемента на другой. Попробуем теперь указать отступ слева для абсолютно позиционированного вебэлемента left:0, в результате получаем вот что:

Итак, если указать в качестве отступа нулевое значение, то вебэлемент с параметром позиционирования absolute выйдет за пределы родителя и прилипнет к краю окна браузера. В зависимости от заданного свойства (left, right, top, bottom) это будет левый, правый, верхний или нижний предел.

Причем необходимо отметить, что left имеет преимущество перед right, а top перед bottom. Если они входят в конфликт друг с другом, то значения соответственно right и bottom игнорируются. Идем далее. Следующим шагом пропишем положительное значение для left верхнего контейнера:

В этом случае произойдет смещение вправо от левого края области просмотра, которая определяется тегом HTML документа. Давайте систематизируем и отметим по пунктам некоторые особенности поведения вебэлемента при присвоении ему position absolute:

• Если размеры блока не указаны явно посредством width и height, то они будут соответствовать размерам контента, включая значения границ и отступов;
• Вебэлемент не будет менять свое место, если у него не прописаны значения left, right, top или bottom;
• Как уже было сказано, left имеет более высокий приоритет перед right, а top перед bottom;
• Если элементу присвоить отрицательное значение left или top, то блок уйдет за границы области просмотра. При этом полоса прокрутки не появится. Этот нюанс можно использовать для удаления вебэлемента из зоны видимости;
• В случае, если left указывается значение, превышающее ширину области просмотра или для right определяется отрицательная величина, то появляется горизонтальная прокрутка. Это же самое касается пары top и bottom;
• Ширина блока с абсолютным позиционированием формируется с помощью left и right, однако, только тогда, когда width не указано. Аналогично происходит формирование высоты элемента при помощи top, bottom и height;
• Вэбэлемент с параметром absolute перемещается одновременно со страницей при ее прокрутке

Думаю, я все разложил по полочкам что касается абсолютного позиционирования и вы можете сами определить, какое практическое применение может быть у элементов с таким свойством. Впрочем, в виде информации скажу, что при помощи свойства position со значением absolute можно создать блоки с фреймами, добавив правило overflow с параметром auto. Также существует возможность получить всплывающие подсказки для фото или изображений.

Position relative (относительное позиционирование)

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

Для примера, который поможет наглядно продемонстрировать действие данной разновидности свойства position, возьмем два контейнера, один из которых с помощью свойства float:left загоним влево, а текстовое содержание второго контейнера будет обтекать этот блок. Для наглядности придадим фон этим элементам, размеры с помощью width и height, а также необходимые отступы посредством свойства margin:

Выглядеть это будет так:

Теперь добавляем к правилу CSS для первого блока position relative, а также смещения вправо (left) и вниз (top) для того, чтобы относительное позиционирование дало результат:

В итоге результирующий вид будет таким:

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

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

Совместное использование position absolute и relative

Теперь рассмотрим, какой результат может дать использование в связке двух видов позиционирования. Ежели родительскому элементу присвоить значение relative, а дочернему absolute, то осуществится замена системы координат и местоположение дочернего вэбэлемента будет определяться относительно его родителя:

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

Для реализации задачи я поступил следующим образом. Вначале прописал в STYLE.CSS своей темы relative для свойства position классу «site-header» родительского тега HEADER:

Также для корректного вывода мне пришлось определить ширину блока с классом «site-description», указав значение width:

Затем для класса «site-branding» дочернего контейнера DIV я указал абсолютное позиционирование и прописал отступы left и top, которые будут определять местоположение элемента в этом случае не в абсолютном исчислении (применительно к окну браузера), а относительно расположения родителя.

Также необходимо было удалить из набора правил CSS для этого тега свойство «text-align:center», чтобы выровнять текст заголовка и дескрипшн по левому краю. В результате такого взаимодействия относительного и абсолютного позиционирования задача была решена и нужный текст в виде заголовка и описания блога был наложен на изображение шапки:

Кроме предложенного мной примера с помощью связки relative absolute можно реализовать в общем случае такие задачи, которые предполагают появление и исчезание определенных вебэлементов. Причем в этом случае они не будут препятствовать правильному отображению остальных составных частей вебстраницы.

Частным случаем может стать, например, создание выпадающего меню на сайте. Это работает следующим образом. Если подвести курсор мышки к заглавному пункту меню, то появляется абсолютно позиционированный блок, сделанный на базе стандартных HTML списков. Его появление обеспечивает то обстоятельство, что соответствующему тегу назначен параметр relative свойства position.

Фиксированное позиционирование position fixed

Ну и последний параметр свойства position помогает фиксировать нужные вебэлементы на странице. В принципе этот вид позиционирования очень похож на абсолютное с той лишь разницей, что элемент с прописанным значением fixed привязан к определенной области на экране в окне браузера посредством left, right, top, bottom. Он остается на месте даже при прокрутке страницы.

Очень показательным примером может оказаться материал о создании плавающего меню на сайте с помощью position fixed, об этом можете почитать, перейдя на страницу по предоставленной ссылке. Рекомендую ознакомиться с этим материалом, даже если вы не планируете реализовывать подобную панель навигации на своем вебресурсе, поскольку данный пример очень показателен и помогает понять суть фиксированного позиционирования.

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

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

Похожие публикации:

1. Как сделать не жирный шрифт css
2. Как сделать отступ блока в css
3. Как сделать отступы между словами в css
4. Как сделать плавный hover в css

Функции CSS-трансформации

Трансформации к элементу применяются при помощи свойства transform . А значением для этого свойства являются функции трансформации.

Пример

Скопировать ссылку «Пример» Скопировано

 .element  transform: translateX(120px);> .element  transform: translateX(120px); >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Часто бывает необходимо каким-то образом трансформировать визуальное представление элемента (масштабировать, повернуть, переместить) и при этом никак не затронуть соседние элементы в документе. Для подобных преобразований используется свойство transform . В качестве значения выступают различные функции трансформации: rotate , translate , scale , skew и другие.

Функции трансформации можно условно разбить на несколько групп.

Функции перемещения

Скопировать ссылку «Функции перемещения» Скопировано

translate ( X , Y )

Скопировать ссылку «translate(X, Y)» Скопировано

Функция используется для смещения элемента вверх-вниз или влево-вправо. В целом, ту же работу выполняют CSS-свойства top , right , bottom , left — например, для абсолютно ( position : absolute ) или относительно ( position : relative ) спозиционированных элементов. Но есть ряд важных отличий: элемент позиционируется относительно соответствующих сторон родителя. То есть left : 20px сместит элемент на 20 пикселей относительно левой границы родителя, а translate ( 20px ) сместит элемент вправо относительно того места, где тот находился до трансформации. В целом, позиционирование и translate прекрасно сочетаются друг с другом. Позиционирование лучше использовать для изначального расположения элемента на странице, а translate применять, если нужно добавить анимации движения.

Функция принимает два параметра: первый параметр отвечает за смещение вправо-влево, а второй параметр — вверх-вниз. Если передать только один параметр, тогда смещение будет только вправо-влево. Мы можем использовать любые единицы измерения расстояния из CSS, например, абсолютные 10px или относительные 50 % . Абсолютное значение используется «как есть»: элемент сместится на 10 пикселей. Относительное значение считается относительно размеров самого элемента. При указании 50 % элемент сместится на половину собственной ширины или высоты.

translate X ( X ) , translate Y ( Y ) , translate Z ( Z )

Скопировать ссылку «translateX(X), translateY(Y), translateZ(Z)» Скопировано

Когда нужно сместить элемент вдоль конкретной оси, можно применить соответствующие функции трансформации.

translate3d ( X , Y , Z )

Скопировать ссылку «translate3d(X, Y, Z)» Скопировано

Если нужно сместить элемент по всем трём осям, можно всё собрать в кучку и использовать эту функцию.

Функции масштабирования

Скопировать ссылку «Функции масштабирования» Скопировано

scale ( X , Y )

Скопировать ссылку «scale(X, Y)» Скопировано

Функция для масштабирования элемента. Значения X и Y — это положительные числа, либо 0. Если в функцию передать 0, то элемент не будет виден. Единица соответствует нормальному масштабу. Числа от 0 до 1 — это уменьшенный масштаб. Числа больше единицы — увеличенный масштаб. Например, чтобы визуально увеличить элемент в 2 раза, нужно написать transform : scale ( 2 ) .

В отличие от translate , один параметр в функции scale работает несколько иначе. scale ( 2 ) — это то же самое, что scale ( 2 , 2 ) , то есть одно число указывает на пропорциональное масштабирование по обеим осям одновременно.

scale X ( X ) , scale Y ( Y ) , scale Z ( Z )

Скопировать ссылку «scaleX(X), scaleY(Y), scaleZ(Z)» Скопировано

Используем, когда необходимо растягивать или сжимать элемент только по горизонтали, вертикали или третьей оси Z .

scale3d ( X , Y , Z )

Скопировать ссылку «scale3d(X, Y, Z)» Скопировано

Если нужно масштабировать элемент по всем трём осям, можно всё собрать в кучку и использовать эту функцию.

Функции наклона

Скопировать ссылку «Функции наклона» Скопировано

skew X ( X ) , skew Y ( Y )

Скопировать ссылку «skewX(X), skewY(Y)» Скопировано

Функции выполняют сдвиг одной стороны элемента относительно противолежащей. В результате элемент как бы наклоняется. Величина наклона зависит от положения точки применения трансформаций ( transform — origin ) и числа градусов, заданных в параметрах. skew X сдвигает верхнюю сторону элемента относительно нижней. skew Y — правую сторону относительно левой.

Функции поворота

Скопировать ссылку «Функции поворота» Скопировано

rotate X ( X ) , rotate Y ( Y ) , rotate Z ( Z )

Скопировать ссылку «rotateX(X), rotateY(Y), rotateZ(Z)» Скопировано

Кроме сдвига или наклона, элемент можно вращать. В функцию передаём единицы измерения углов ( deg , rad , turn ), например 45deg или 0 . 5turn . Обратите внимание, что обычное вращение элемента на странице — это вращение относительно оси Z . Если мы хотим вращать элемент относительно других осей, то нужно не забывать про перспективу. С ней повороты относительно X или Y будут выглядеть максимально естественно.

rotate ( Z )

Скопировать ссылку «rotate(Z)» Скопировано

Функция аналогична rotate Z ( Z ) . Чтобы не запоминать ось для типового вращения элемента, мы можем использовать просто слово rotate .

rotate3d ( X , Y , Z )

Скопировать ссылку «rotate3d(X, Y, Z)» Скопировано

Если нужно повернуть элемент по всем трём осям, можно всё собрать в кучку и использовать эту функцию.

Прочие функции

Скопировать ссылку «Прочие функции» Скопировано

matrix ( a , b , c , d , tx , ty )

Скопировать ссылку «matrix(a, b, c, d, tx, ty)» Скопировано

Выше мы упомянули несколько функций трансформации. Каждая выполняет какое-то одно небольшое действие. matrix ( ) — это функция, которой можно описать любую трансформацию в плоскости экрана. Она использует матричные преобразования и может заменить собой все вышеописанные функции. Но при этом она очень сложно читается. Например, глядя на функцию matrix ( 0 . 707107 , 0 . 707107 , — 0 . 707107 , 0 . 707107 , — 0 . 707107 , 34 . 6482 ) невозможно сразу точно определить, что она аналогична записи rotate ( 45deg ) translate ( 24px , 25px ) . Зачем же она нужна, такая сложная, если проще описать трансформации соответствующими функциями? Ну например, с её помощью можно писать сложные динамические анимации. Популярные JS-библиотеки для анимации «под капотом» используют как раз матричные преобразования, а не конкретные функции трансформации.

matrix3d ( a1 , b1 , c1 , d1 , a2 , b2 , c2 , d2 , a3 , b3 , c3 , d3 , a4 , b4 , c4 , d4 )

Скопировать ссылку «matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)» Скопировано

Если нам нужно произвести трансформации в трёхмерном пространстве, а не в плоскости экрана, то нужно использовать эту функцию. Она ещё более сложна в понимании, и вряд ли кто-то вообще пишет её руками.

perspective ( Z )

Скопировать ссылку «perspective(Z)» Скопировано

Несмотря на то, что экран плоский, у нас всё равно есть возможность перемещать элемент вдоль оси Z . Она направлена перпендикулярно плоскости экрана в сторону пользователя. Если мы используем translate Z просто так, то никакого перемещения ближе или дальше мы не увидим. Чтобы было ощущение движения к нам или от нас, элемент должен становиться крупнее или мельче. Стул, который стоит рядом с нами, будет визуально крупнее, чем стул, стоящий в конце комнаты. Эта разница в размерах — следствие перспективы. Элемент на экране может вести себя подобно объектам в реальном мире и менять размер при перемещении к нам или от нас. Чтобы это заработало, нужно элементу задать свойство perspective . Это свойство необходимо применять при любых трансформациях, выходящих из плоскости экрана.

Функция perspective ( ) принимает один параметр — расстояние до точки схождения перспективы. Плоскость экрана принимается за начало координат. Например, запись perspective ( 500px ) означает, что точка схождения перспективы находится как бы на расстоянии 500 пикселей вглубь от плоскости экрана.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Можно применять сразу несколько функций трансформации:

 .element  transform: translate(20px, 20px) skew(20deg);> .element  transform: translate(20px, 20px) skew(20deg); >    Скопировать Скопировано Не удалось скопировать   

�� Если среди значений есть функция perspective ( ) , то она должна быть первой среди всех значений:

 .element  transform: translate3d(10px, 0, 20px) rotateY(3deg) perspective(500px);> .element  transform: translate3d(10px, 0, 20px) rotateY(3deg) perspective(500px); >    Скопировать Скопировано Не удалось скопировать   

 .element  transform: perspective(500px) translate3d(10px, 0, 20px) rotateY(3deg);> .element  transform: perspective(500px) translate3d(10px, 0, 20px) rotateY(3deg); >    Скопировать Скопировано Не удалось скопировать   

�� В последних версиях спецификации появились отдельные CSS-свойства для трансформаций. Это rotate , translate и scale . Если раньше мы писали комплексные трансформации, применяя несколько функций, то теперь каждую трансформацию можем описать отдельным свойством:

 .transform-function  transform: translate(100px, 100px) rotate(180deg) scale(2);> .individual-transforms  translate: 100px 100px; rotate: 180deg; scale: 2;> .transform-function  transform: translate(100px, 100px) rotate(180deg) scale(2); > .individual-transforms  translate: 100px 100px; rotate: 180deg; scale: 2; >    Скопировать Скопировано Не удалось скопировать   

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

 .element  transform: translateX(20px) rotate(90deg);> .mid-scale  scale: 1.5;> .element  transform: translateX(20px) rotate(90deg); > .mid-scale  scale: 1.5; >    Скопировать Скопировано Не удалось скопировать   

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

 .element  transform: translateX(20px) rotate(90deg);> .mid-scale  transform: scale(1.5);> .element  transform: translateX(20px) rotate(90deg); > .mid-scale  transform: scale(1.5); >    Скопировать Скопировано Не удалось скопировать   

Добавив этот класс к элементу, мы просто рискуем перекрыть любое свойство transform , заданное до этого.

�� При использовании свойства transform результирующая трансформация вычисляется с учётом порядка функций. Например, transform : rotate ( 15deg ) translate X ( 100px ) translate Y ( 30px ) и transform : translate X ( 100px ) translate Y ( 30px ) rotate ( 15deg ) ; дадут разный конечный результат:

Если же мы используем индивидуальные свойства, результат будет одинаковым вне зависимости от порядка свойств:

Второй пример корректно работает во всех современных браузерах, для более старых версий проверяйте поддержку на Can I use.

На практике

Скопировать ссылку «На практике» Скопировано

Саша Патлух советует

Скопировать ссылку «Саша Патлух советует» Скопировано

�� Полезное знание при работе с функциями трансформации из JavaScript.

Если мы вычисляем значение функции трансформации, заданной в CSS, методом get Computed Style ( ) , получим матрицу преобразований. А в случае получения значения из свойства style по ключу — получим строку с описанием функции трансформации.

Допустим, на странице есть с такой трансформацией, описанной в CSS:

 div  transform: translate(200px);> div  transform: translate(200px); >    Скопировать Скопировано Не удалось скопировать   

Вычисление из JS методом get Computed Style ( ) вернёт значение matrix ( 1 , 0 , 0 , 1 , 200 , 0 ) :

 const element = document.querySelector('div')console.log(getComputedStyle(element).transform) const element = document.querySelector('div') console.log(getComputedStyle(element).transform)    Скопировать Скопировано Не удалось скопировать   

Но если стиль задан инлайном в HTML,

 div style="transform: translate(200px);">div>    Скопировать Скопировано Не удалось скопировать   

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

Код ниже вернёт строку translate ( 200px )

 const element = document.querySelector('div')console.log(element.style.transform) const element = document.querySelector('div') console.log(element.style.transform)    Скопировать Скопировано Не удалось скопировать   

Как в flex опустить вниз последний элемент?

Как последний элемент(№5) опустить вниз, если для flex бокса используется flex-diretion: column? Мне нужно чтобы последний элемент №5 был в самом низу.

• Вопрос задан более года назад
• 751 просмотр

Комментировать
Решения вопроса 2

Как ваше ничего? Да, моё тоже
margin-top auto
Ответ написан более года назад
Alexander3928 @Alexander3928 Автор вопроса

мне нужно без margin. Я так пробовал, результат почти который нужен, но все же он мне не подходит. Он дополнительно растягивает height.

alexalexes @alexalexes

.item-5 < margin-top: auto !important; >.border

Обратите внимание на селектор .border — он имеет одинаковый уровень специфичности с .item-5, поэтому перебивается параметр margin (требуется костыль в виде !important).
Если нужно обозначить более специфичные свойства отдельных элементов, то .item-5 селектор нужно писать после селектора .border либо добавлять вес специфичности, например div.item-5, чтобы избавиться от костыля !important.

Ответ написан более года назад
Alexander3928 @Alexander3928 Автор вопроса

мне нужно без margin. Я так пробовал, результат почти который нужен, но все же он мне не подходит. Он дополнительно растягивает height.

alexalexes @alexalexes

Ничего не растягивается — ни элемент item-5, ни контейнер flex.
Если вам нужно заполнить пространство высотой item-5, то используйте flex-grow: 1 для этого элемента.

Alexander3928 @Alexander3928 Автор вопроса
alexalexes, а что margin-top: auto !important;
то единственный способ? Или через flex не получится?
alexalexes @alexalexes

Нарисуйте в paint-e какой результат вы ожидаете.
Вот такой получается c .item-5

А такой с .item-5

Alexander3928 @Alexander3928 Автор вопроса

alexalexes, я же говорю, мне нужен такой же результат, как и с использованием margin-top: auto !important; Только без использования margin. Я кстати ошибся, margin не растягивал height, мне просто показалось так, прошу прощения.

alexalexes @alexalexes
Есть такой вариант:

.flex < . position: relative; >.item-5

Но от него смердит попыткой поддержки старых браузеров Internet Explorer, в которых не развит flex.
Еще недостатком является то, что элемент item-5 не будет чуять присутствие других элементов в контейнере flex, если вдруг кому-то захочется выйти из своих размеров.

Как поместить div в нижний правый угол html страницы?

Как с помощью css стилей разместить div элемент внизу справа html страницы?

Отслеживать
14.2k 1 1 золотой знак 21 21 серебряный знак 31 31 бронзовый знак
задан 16 янв 2017 в 9:54
525 1 1 золотой знак 5 5 серебряных знаков 17 17 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

CSS

#bottom-right

HTML

Вообще по андроиду гоню но сейчас что то нашло)))

Отслеживать
ответ дан 16 янв 2017 в 10:01
user194625 user194625

#bottom-right

Текст

Из примера выше

Отслеживать
ответ дан 16 янв 2017 в 12:17
69 2 2 бронзовых знака

Чужой ответ можно дополнить сниппетом (при достаточном рейтинге), а публиковать чужие ответы как свои нехорошо. Тем более, не очень то он и правильный.

16 янв 2017 в 12:23

Извините я все понимаю.. Я в версику вообще на лез никогда. Просто заметил что вопрос прост. Решил нагуглить. Помог человеку 🙂

– user194625
16 янв 2017 в 15:23

• html
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

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