Абсолют против и Относительно – Объясняя CSS Позиционирование

CSS-позиционирование – это больше, чем просто координаты X, Y

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

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

Хотя абсолютные и относительные являются двумя свойствами позиции CSS, наиболее часто используемыми в веб-дизайне, на самом деле свойство позиции имеет четыре состояния:

  • статический
  • абсолютный
  • родственник
  • фиксированный

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

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

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

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

Абсолютное позиционирование – это, пожалуй, самая простая позиция CSS для понимания. Вы начинаете с этого свойства CSS позиции:

 позиция: абсолютная; 

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

Например, если у вас есть деление, которое позиционируется с использованием значения относительного и внутри этого деления, у вас есть абзац, который вы хотите расположить на 50 пикселей от верхней части деления, вы добавляете значение позиции absolute к этому абзацу вместе со значением смещения 50px в свойстве top , например:

 позиция: абсолютная; 
верх: 50px;

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

Доступны следующие четыре свойства позиционирования:

  • Топ
  • право
  • низ
  • оставил

Вы можете использовать top или bottom , поскольку элемент не может быть расположен в соответствии с обоими этими значениями, а также вправо или слева. .

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

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

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

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

 

Пункт 1.


Пункт 2.


Пункт 3.


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

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

Как насчет фиксированного позиционирования?

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

Чтобы использовать это значение свойства, вы устанавливаете:

 позиция: фиксированная; 

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

 @media screen {
h1 # first {position: fixed; }
}
@media print {
h1 # first {position: static; }
}

Оцените статью
Solutics.ru
Добавить комментарий