Flow (в переводе с англ. – поток) описывает, как элементы располагаются относительно друг друга. По умолчанию родственные элементы находятся в одном потоке и их расположение на странице статично; порядок появления элементов на странице такой же, как и в коде. С помощью CSS можно перемещать элементы в отдельные потоки. Это дает больше возможностей для дизайна страницы и контроля схемы размещения элементов над кодом.
Position
Мы используем свойство position для того, чтобы определить позицию (расположение) элемента. Стандартное значение: статичное размещение (static). Но есть и другие варианты:
-
absolute (абсолютное)
-
relative (относительное)
-
fixed (зафиксированное)
Абсолютное позиционирование
Элементы, которые спозиционированы абсолютно, удаляются из обычного потока. В результате, позиционирование последующих родственных элементов не затрагивается. Чтобы спозиционировать элементы абсолютно, нужно свойству position установить значение absolute, а также определить офсетные свойства (свойства смещения).
Офсетные свойства: top, right, bottom и left
Офсетными свойствами (свойствами смещения) могут быть: top (наверх), right (вправо), bottom (вниз) и left (налево). Мы можем указать их значения в цифрах измерения (например, 10px) или процентах от содержащего блока (например 20%). Эти свойства смещают элемент от наиболее близкого блочного элемента, который спозиционирован нестатично (т.е. абсолютно, относительно или зафиксировано). В случае, если нет предшествующего элемента, спозиционированного нестатично, смещение происходит относительно браузерного окна.
Пример кода
|
02
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
04
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
05
|
<style type="text/css">
|
|
10
|
border:2px solid #006;
|
|
12
|
background-color:#600;
|
|
22
|
background-color:#def;
|
|
23
|
border:1px solid #006;
|
|
26
|
<title>CSS Absolute Positioning</title>
|
|
30
|
<h1>Абсолютное позиционирование CSSg</h1>
|
|
31
|
<h2>From the Left and the Top</h2>
|
|
32
|
<div id="explanation">
|
|
33
|
<p>Notice how this text is in the upper corner.</p>
|
|
34
|
<p>That's because the preceding h1 element has been absolutely positioned.</p>
|
|
35
|
<p>Positioning an element absolutely takes the element out of the regular flow of the document.</p>
|
Обратите внимание, что позиционирование родственных элементов h2 и div не было затронуто предшествующим элементом h1. Это результат того, что элемент был спозиционирован абсолютно
Посмотрите, что произойдет, если мы опустим вниз содержащий div «wrapper» значением свойства margin-top:
Обратите внимание, что элемент h1 не был затронут этим. Это потому, что div «wrapper» не был в том же потоке, что и элемент h1. Чтобы поместить его в тот же поток, его требуется спозиционировать абсолютно. Достигнуть этого можно следующим кодом (тогда div переместится из-за применения свойства top, а не margin-top):
Далее мы должны спозиционировать элемент h1 относительно нижнего правого угла, используя этот код:
Использование указанного выше кода даст нам следующие результаты:
Вы увидите, что Firefox не разместит элемент в самом низу экрана. Дистанция от нижней части может отличаться между браузерами, но во всех них будет какое-то пространство.
Как видно на скриншоте h1 элемент на той же дистанции от правого нижнего угла после изменения окна браузера.
По-прежнему, в случае когда div «wrapper» спозиционирован абсолютно, элемент h1 будет спозиционирован внутри элемента div. Вот почему этот код будет обрабатывать страницу под ним:
Взгляните на div «wrapper». Полностью содержит элемент h1.