Позиционирование CSS уже давно является важной частью создания макетов веб-сайтов. Даже с ростом методов компоновки CSS, таких как Flexbox и CSS Grid, позиционирование по-прежнему занимает важное место в сумке трюков любого веб-дизайнера.
При использовании позиционирования CSS первое, что вам нужно сделать, это установить свойство CSS для определения местоположения браузера, независимо от того, собираетесь ли вы использовать абсолютное или относительное позиционирование для данного элемента. Вам также необходимо понять разницу между этими двумя свойствами позиционирования.
В то время как абсолютные и относительные - это два свойства позиции CSS, наиболее часто используемые в веб-дизайне, в свойстве position фактически есть четыре состояния:
- статический
- абсолютный
- родственник
- фиксированный
Статическое позиционирование
Static - это позиция по умолчанию для любого элемента веб-страницы. Если вы не определяете позицию элемента, оно является статичным, что означает, что оно отображается на экране в зависимости от того, где оно находится в документе HTML и как оно отображается внутри обычного потока этого документа.
Если вы применяете правила позиционирования, такие как Топ или же оставил к элементу, который имеет статическую позицию, эти правила игнорируются, и элемент остается там, где он появляется в обычном потоке документа. Вы редко, если когда-либо, должны установить элемент в статическую позицию в CSS, потому что это значение по умолчанию.
Абсолютное позиционирование CSS
Абсолютное позиционирование - это, пожалуй, самая легкая позиция CSS для понимания. Вы начинаете с этого свойства позиции CSS:
позиция: абсолютная;
Это значение указывает браузеру, что все, что должно быть расположено, должно быть удалено из обычного потока документа и вместо этого помещено в точное местоположение на странице. Это вычисляется на основе ближайшего нестатически расположенного предка этого элемента. Поскольку абсолютно позиционированный элемент извлекается из нормального потока документа, он влияет на то, как элементы, находящиеся перед ним или после него в HTML, размещаются на веб-странице. В качестве примера, если у вас есть подразделение, которое позиционируется с использованием значения относительного и внутри этого деления, у вас есть абзац, который вы хотите разместить на 50 пикселях от вершины деления, вы добавляете значение позиции абсолютный к этому абзацу вместе со значением смещения 50px на Топ собственности, например: позиция: абсолютная;top: 50px;
Этот абсолютно позиционированный элемент всегда отображает 50 пикселей от вершины этого относительно позиционированного деления, независимо от того, что еще показывает там в нормальном потоке. Ваш абсолютно позиционированный элемент использует относительно позиционированный как его контекст, а значение позиционирования, которое вы используете, относительно этого. Четыре свойства позиционирования, которые доступны для использования: Вы можете использовать либо Топ или же низ - поскольку элемент не может быть расположен в соответствии с обоими этими значениями - и либо право или же оставил. Если элемент установлен в положение абсолютного, но у него нет нестатически расположенных предков, то он позиционируется относительно элемента body, который является элементом верхнего уровня страницы. Относительное позиционирование использует те же самые четыре свойства позиционирования, что и абсолютное позиционирование, но вместо того, чтобы основывать положение элемента на его ближайшем нестатически позиционированном предке, оно начинается с того, где элемент будет, если он все еще находится в нормальном потоке. Например, если на вашей веб-странице есть три абзаца, а у третьего есть позиция: относительная стиль, размещенный на нем, его положение смещено на основе его текущего местоположения. Пункт 1. Пункт 2. Пункт 3. В приведенном выше примере третий абзац позиционируется 2em с левой стороны элемента контейнера, но все еще ниже первых двух абзацев. Он остается в нормальном потоке документа и слегка смещен. Если вы измените его на позиция: абсолютная, все, что следует за ним, отображается поверх него, потому что оно больше не находится в нормальном потоке документа. Элементы на веб-странице часто используются для установки значения позиция: относительная без установленного значения смещения, что означает, что элемент остается точно там, где он будет отображаться в нормальном потоке. Это делается исключительно для того, чтобы установить этот элемент как контекст, с которым другие элементы могут быть расположены абсолютно. Например, если у вас есть подразделение, окружающее весь ваш сайт, с классом контейнер, который является общим сценарием в веб-дизайне, это разделение может быть установлено в положение родственник так что все внутри него может использовать его как контекст позиционирования. Фиксированное позиционирование очень похоже на абсолютное позиционирование. Позиция элемента вычисляется так же, как и абсолютная модель, но фиксированные элементы затем фиксируются в этом месте - почти как водяной знак. Затем все остальное на странице прокручивает этот элемент. Чтобы использовать это значение свойства, вы устанавливаете: позиция: фиксированная;
Помните, что когда вы исправляете элемент на своем сайте, он печатается в том месте, где распечатывается ваша веб-страница. Например, если ваш элемент зафиксирован в верхней части страницы, он будет отображаться в верхней части каждой печатной страницы, потому что он зафиксирован в верхней части страницы. Вы можете использовать типы носителей, чтобы изменить, как печатаемые страницы отображают фиксированные элементы: @media screen { h1 # first {position: fixed; } } @media print { h1 # first {position: static; } }
Относительное позиционирование
Что такое фиксированное позиционирование?
