Послание № 14
Позиционирование
Поток документа
Давайте еще раз вспомним, что такое поток документа.
Порядок отображения элементов на странице называется потоком документа. Блочные элементы отображаются как прямоугольные области, идущие друг за другом сверху вниз, а строчные элементы располагаются сверху вниз и слева направо и при необходимости переносятся на новую строку.
Элементы можно вкладывать друг в друга. Чем раньше в коде расположен элемент, тем выше он расположен на странице.
Любой элемент, который находится в потоке, занимает на странице свою собственную площадь и, если надо, отталкивает от себя соседей с помощью маргинов (margin).
Сейчас мы вспомнили стандартный поток документа, а теперь давайте познакомимся с CSS свойствами, которые могут её изменить.
Свойство positions и свойства top, bottom, left, right
Для изменения типа позиционирования применяется свойство position. Само по себе это свойство используется крайне редко и как правило идёт в комбинации со свойствами left, right, top, bottom, которые определяют, соответственно, положение элемента слева, справа, сверху и снизу.
- left — задаёт координаты левого края элемента от левого края родителя или левого края исходного положения элемента.
- right — задаёт координаты правого края элемента от правого края родителя или правого края исходного положения элемента.
- top — задаёт координаты верхнего края элемента от верхнего края родителя или верхнего края исходного положения элемента.
- bottom — задаёт координаты нижнего края элемента от нижнего края родителя или нижнего края исходного положения элемента.
Заметьте, что напрямую нельзя задать положение правого края элемента от левого края родителя и наоборот. Также нельзя задать положение верхнего края элемента от нижнего края родителя и наоборот.
У position есть пять значений:
- static — нормальное или статичное позиционирование, при этом элементы отображаются на веб-странице в том порядке, в каком они идут в исходном коде HTML сверху вниз. static — это значение по умолчанию для position.
- relative — относительное позиционирование. Изменяет положение элемента от его исходного расположения.
- absolute — абсолютное позиционирование. Элемент при этом не существует в потоке документа и его положение задаётся относительно краёв браузера.
- fixed — фиксированное позиционирование. По своему действию похоже на абсолютное позиционирование, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
- sticky — липкое или приклеенное позиционирование используется для фиксации элемента в заданном месте при прокрутке страницы.
Свойство position не наследуется, так что для дочерних элементов его требуется указывать явно.
А теперь давайте разберемся по подробнее.
Относительное позиционирование
Задавая элементу свойство positions со значением relative, мы говорим браузеру, что бы он сохранил за элементом его место в потоке, а также позволил нам перемещать его используя свойства left, top, right и bottom. Например:
<style>
.block {
width: 100px;
height: 100px;
background-color: #10d28d;
border: 5px solid #0d9e6a;
margin: 10px;
}
.relative {
position: relative;
top:35px;
left:50px;
}
</style>
<section class="section">
<div class="block"> </div>
<div class="block relative"> </div>
<div class="block"> </div>
<div class="block"> </div>
<div class="block"> </div>
</section>
Вот как это выглядит:
Как видно, мы сдвинули наш блок, но его место осталось не тронутым.
Абсолютное позиционирование
Значение absolute свойства position задаёт элементу абсолютное позиционирование.
Абсолютно позиционированные элементы обладают следующими особенностями:
1. Выпадают из потока документа. Место, которое они занимали, становится как бы пустым и его занимают соседние элементы.
2. Ширина по умолчанию зависит от содержимого (а не растягивается на всю доступную ширину).
3. Остаются на том же месте, где были, если не заданы значения свойств top, left, right, bottom.
Как мы видим ниже, наш блок вышел из потока документа, его место заняли другие, а сам он стал располагаться в зависимости от всей страницы.
Свойства left, top, right и bottom по-разному работают для элементов с абсолютным и относительным позиционированием.
Если для «относительных» элементов эти свойства задают смещение относительно исходной позиции, то для «абсолютных» элементов они задают расположение относительно некой системы координат, как для точки на графике.
По умолчанию такой системой координат является окно браузера, а точки начала координат привязаны к его углам.
Свойство left задает отступ от левого края окна браузера. Если свойству задать отрицательное значение, то элемент сместится за левый край браузера (при этом полоса прокрутки не появится).
Свойство top задает отступ от верхнего края окна браузера до верхнего края абсолютно спозиционированного элемента.
Таким образом, с помощью свойств left и top можно позиционировать «абсолютный» элемент относительно левого верхнего угла окна браузера.
Свойство right задает отступ от правого края окна браузера до правого края «абсолютного» элемента.
Это свойство позволяет легко прижать элемент любой ширины к правому краю окна. Если задать отрицательное значение для right, то элемент сместится за край окна, но при этом появится полоса прокрутки.
Свойство bottom задает отступ от нижнего края окна браузера до нижнего края «абсолютного» элемента. Отрицательное значение bottom затолкнет элемент за нижний край окна браузера и при этом появится полоса прокрутки.
Точка отсчёта координат
По умолчанию «абсолютные» элементы позиционируются в системе координат, привязанной к окну браузера. Однако, систему координат можно изменить.
Если какой-нибудь из родителей «абсолютного» элемента имеет относительное позиционирование (position:relative), то элемент будет позиционироваться относительно этого родителя.
Неявная точка отсчёта
Неявная точка отсчета — это то место, где находился элемент до того, как ему задали абсолютное позиционирование. Если «абсолютному» элементу не задавать свойства left... bottom, то он выпадет из потока, но останется на прежнем месте.