Элемент Flow

Переклад українською: Елемент Flow

Flow (в переводе с англ. – поток) описывает, как элементы располагаются относительно друг друга. По умолчанию родственные элементы находятся в одном потоке и их расположение на странице статично; порядок появления элементов на странице такой же, как и в коде. С помощью CSS можно перемещать элементы в отдельные потоки. Это дает больше возможностей для дизайна страницы и контроля схемы размещения элементов над кодом.

Position

Мы используем свойство position для того, чтобы определить позицию (расположение) элемента. Стандартное значение: статичное размещение (static). Но есть и другие варианты:

  • absolute (абсолютное)
  • relative (относительное)
  • fixed (зафиксированное)

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

Элементы, которые спозиционированы абсолютно, удаляются из обычного потока. В результате, позиционирование последующих родственных элементов не затрагивается. Чтобы спозиционировать элементы абсолютно, нужно свойству position установить значение absolute, а также определить офсетные свойства (свойства смещения).

Офсетные свойства: top, right, bottom и left

Офсетными свойствами (свойствами смещения) могут быть: top (наверх), right (вправо), bottom (вниз) и left (налево). Мы можем указать их значения в цифрах измерения (например, 10px) или процентах от содержащего блока (например 20%). Эти свойства смещают элемент от наиболее близкого блочного элемента, который спозиционирован нестатично (т.е. абсолютно, относительно или зафиксировано). В случае, если нет предшествующего элемента, спозиционированного нестатично, смещение происходит относительно браузерного окна.

Пример кода

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
h1 {
 position:absolute;
 top:70px;
 left:50px;
 border:2px solid #006;
 padding:1px;
 background-color:#600;
 color:#eee;
}
#explanation {
 color:#006;
 font-weight:bold;
 font-size:1.2em;
}
#wrapper {
 width:600px;
 background-color:#def;
 border:1px solid #006;
}
</style>
<title>CSS Absolute Positioning</title>
</head>
<body>
<div id="wrapper">
 <h1>Абсолютное позиционирование CSSg</h1>
 <h2>From the Left and the Top</h2>
 <div id="explanation">
  <p>Notice how this text is in the upper corner.</p>
  <p>That's because the preceding h1 element has been absolutely positioned.</p>
  <p>Positioning an element absolutely takes the element out of the regular flow of the document.</p>
 </div>
</div>
</body>
</html>

Обратите внимание, что позиционирование родственных элементов h2 и div не было затронуто предшествующим элементом h1. Это результат того, что элемент был спозиционирован абсолютно

Посмотрите, что произойдет, если мы опустим вниз содержащий div «wrapper» значением свойства margin-top:


#wrapper {
 margin-top:100px;
 width:600px;
 background-color:#def;
 border:1px solid #006;
}

Обратите внимание, что элемент h1 не был затронут этим. Это потому, что div «wrapper» не был в том же потоке, что и элемент h1. Чтобы поместить его в тот же поток, его требуется спозиционировать абсолютно. Достигнуть этого можно следующим кодом (тогда div переместится из-за применения свойства top, а не margin-top):

#wrapper {
 position:absolute;
 top:100px;
 width:600px;
 background-color:#def;
 border:1px solid #006;
}

Далее мы должны спозиционировать элемент h1 относительно нижнего правого угла, используя этот код:


h1 {
 position:absolute;
 bottom:0px;
 right:0px;
 border:2px solid #00f;
 background-color:#600;
 color:#eee;
}

Использование указанного выше кода даст нам следующие результаты:

Вы увидите, что Firefox не разместит элемент в самом низу экрана. Дистанция от нижней части может отличаться между браузерами, но во всех них будет какое-то пространство.

Как видно на скриншоте h1 элемент на той же дистанции от правого нижнего угла после изменения окна браузера.

По-прежнему, в случае когда div «wrapper» спозиционирован абсолютно, элемент h1 будет спозиционирован внутри элемента div. Вот почему этот код будет обрабатывать страницу под ним:


#wrapper {
 position:absolute;
 top:10px;
 width:600px;
 background-color:#def;
 border:1px solid #006;
}

Взгляните на div «wrapper». Полностью содержит элемент h1.