Элемент Flow
Переклад українською: Елемент Flow
Flow (в переводе с англ. – поток) описывает, как элементы располагаются относительно друг друга. По умолчанию родственные элементы находятся в одном потоке и их расположение на странице статично; порядок появления элементов на странице такой же, как и в коде. С помощью CSS можно перемещать элементы в отдельные потоки. Это дает больше возможностей для дизайна страницы и контроля схемы размещения элементов над кодом.
Position
Мы используем свойство position для того, чтобы определить позицию (расположение) элемента. Стандартное значение: статичное размещение (static). Но есть и другие варианты:
- absolute (абсолютное)
- relative (относительное)
- fixed (зафиксированное)
Абсолютное позиционирование
Элементы, которые спозиционированы абсолютно, удаляются из обычного потока. В результате, позиционирование последующих родственных элементов не затрагивается. Чтобы спозиционировать элементы абсолютно, нужно свойству position установить значение absolute, а также определить офсетные свойства (свойства смещения).
Офсетные свойства
Офсетными свойствами (свойствами смещения) могут быть: 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. Это результат того, что элемент был спозиционирован абсолютно.
Примеры с margin и top
#wrapper {
margin-top:100px;
width:600px;
background-color:#def;
border:1px solid #006;
}
Элемент h1 не был затронут этим, так как div «wrapper» не находится в том же потоке, что и h1. Чтобы поместить его в тот же поток, div нужно позиционировать абсолютно:
#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;
}
После этого элемент h1 будет позиционироваться внутри div «wrapper» независимо от margin. Дистанция от нижней части может немного различаться между браузерами.