Позиционирование CSS (Позиционирование)

Атрибут position CSS используется для указания того, как элемент позиционируется на странице, и методы позиционирования CSS Position включают: статическое позиционирование (static), абсолютное позиционирование (absolute), относительное позиционирование (relative), фиксированное позиционирование (fixed).

Методы позиционирования CSS

Позиционирование элементов на веб-странице необходимо для良好的 дизайна макета. В CSS есть несколько методов позиционирования элементов. В следующем разделе мы рассмотрим каждый из этих методов.

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

Элементы с статическим позиционированием всегда定位在页面的正常流程中。HTML-элементы по умолчанию находятся в статическом положении. Элементы с статическим позиционированием не влияют наtop,bottom,left,right, иz-indexОсобенности.

Если не указан атрибут position элемента, то по умолчанию элемент имеет статическое позиционирование. Любой html-объект, поддерживающий атрибут position, по умолчанию имеет значение static. Static - это значение по умолчанию для атрибута position, что означает, что блок остается на своем исходном месте и не перезанимается.
В общем, мы редко используем 'position:static', но иногда, когда мы используем javascript для управления положением элементов, если мы хотим сделать элементы с другим способом позиционирования статическими, мы должны использовать 'position:static;' для этого.

.box　{
　　　　padding:　20px;
　　　　background:　#7dc765;
}

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

Элементы с относительным позиционированием позиционируются относительно их нормального положения.

В схеме относительного позиционирования положение рамки элемента рассчитывается на основе обычного потока. Затем положение рамки изменяется на основе свойств top или bottom и/или left или right, или рамка перемещается от этого нормального положения.

.box　{
　　　　position:　relative;
　　　　left:　100px;
}

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

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

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

.box　{
　　　　position:　absolute;
　　　　top:　200px;
　　　　left:　100px;
}

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

Фиксированное позиционирование является подкатегорией абсолютного позиционирования.

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

.box　{
　　　　position:　fixed;
　　　　top:　200px;
　　　　left:　100px;
}