базовый курс

ГРУППА КУРСА

Позиционирование блоков в CSS

Позиционирование блоков позволяет располагать эти их независимо от расположения других элементов страницы. Позиционирование блоков в CSS осуществляется путём указания координат.

Основной поток документа

Вы уже знаете правила, в соответствии с которыми элементы располагаются на странице. Они идут друг за другом в том порядке, в котором они находятся в коде страницы. Блоковые начинаются с новой строки, а строчные располагаются в строке. Элементы, которые подчиняются этим приавилам, находятся в основном потоке документа. Этот термин возник потому, что существуют элементы, которые размещаются на странице совсем по-другому. Для этого элементу должно быть установлено позиционирование. При этом, он удаляется из основного потока документа. Остальные элементы занимают его место так, как будто его вообще нет. Иногда можно встретить информацию, что элементы, которым установлено свойство float, тоже удаляются из основного потока. Но это не совсем правильно, потому что строковые элементы не занимают их место.

Виды позиционирования

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

Существуют следующие виды позициционирования блоков:

Абсолютное позиционирование. При этом виде позиционирования элемент размещается по указанным координатам. Координаты осчтитываются от границ окна браузера или от границ внешнего блока, если этот блок тоже имеет позиционирование.

Относительное позиционирование. При этом виде позиционирования элемент смещается относительно того места, которое он занимал в основном потоке документа. Другие элементы не занимают место элемента в основном потоке. Оно остаётся пустым, если его не перекроют позиционированные элементы.

Фиксированное позиционирование. При этом виде позиционирования элемент размещается по координатам относительно границ окна браузера. При прокрутке страницы такой элемент не движется вместе со всеми элементами, а остаётся на одном месте в окне браузера.

Статическое позиционирование. Это расположение элемента в основном потоке документа. То есть, элемент находится там, где и должен находиться без позиционирования. Если ему заданы координаты, то они игнорируются.

Позиционирование устанавливает свойство position. Оно принимает значения:

position: absolute; - абсолютное

position: relative; - относительное

position: fixed; - фиксированное

position: static; - статическое

Для указания координат используются свойства:

left - смещение левого края элемента относительно левой границы окна браузера или внешнего блока.

right - смещение правого края элемента относительно правой границы окна браузера или внешнего блока.

top - смещение верхнего края элемента относительно верхней границы окна браузера или внешнего блока.

bottom - смещение нижнего края элемента относительно нижней границы окна браузера или внешнего блока.

Эти свойства могут принимать следующие значения:

left: auto; - без смещения (по умолчанию)

left: величина в единицах измерения CSS

left: величина в процентах. Если элемент смещается относительно окна браузера, то проценты расчитываются от размеров окна браузера. А если елемент смещается относительно внешнего блока, то проценты расчитываются от размеров блока.

left: inherit; - значение принимается от родительского элемента

У остальных свойств значения указываются так же, как у left.

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

Абсолютное позиционирование в CSS используется для того, чтобы разместить элемент в конкретном месте страницы. Прежде чем размещать позиционированные элементы, создадим страницу и добавим на неё два блока. Они будут находиться в основном потоке документа. Один из них будет с большой высотой. Это нужно для того, чтобы у страницы появилась прокрутка и Вы могли увидеть, как позиционированные элементы ведут себя при прокрутке. Кроме того вы поймёте, как элементы с разными видами позиционирования располагаются относительно основного потока. Для всех блоков на странице установим фон.

Стиль:

+
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
<style>
7
8
9
10
11
12
13
14
15
16
div
  {
  background-color: #909090;
  }
.stream
  {
  background-color: Blue;
  width: 100px;
  margin-bottom: 2px;
  }

HTML код:

20
21
<div class="stream" style="height: 300px"></div>
<div class="stream" style="height: 1500px"></div>

Теперь добавим на страницу блок с абсолютным позиционированием. Укажем координаты слева и сверху:

Стиль:

17
18
19
20
21
22
#absleft
  {
  position: absolute;
  left: 40px;
  top: 20px;
  }

HTML код:

28
29
<div id="absleft">Абсолютное позиционирование<br>
слева сверху</div>

Позиционированный элемент наложился на синий блок и частично закрыл его. Обратите внимание - элемент имеет ширину по размеру контента. Это особенность позиционированных блоков. Если блоку не установлена ширина, то он не занимает всю ширину страницы или внешнего блока, как обычные блоки. Позиционированный блок получает ширину по размеру контента с учётом внутренних отступов. Это правило не распространяется на относительное позиционирование.

Добавим на страницу ещё один блок с абсолютным позиционированием, но теперь укажем координаты справа и снизу:

Стиль:

23
24
25
26
27
28
#absright
  {
  position: absolute;
  right: 10px;
  bottom: 60px;
  }

HTML код:

36
37
<div id="absright">Абсолютное позиционирование<br>
справа снизу</div>

Попробуйте двигать правый край окна браузера. Блок, который позиционирован по правому краю, будет двигаться, а блок, который позиционирован по правому краю, останется неподвижным.

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

При относительном позиционировании элемент смещается относительно своего положения в основном потоке. Его место остаётся незанятым. Для того, чтобы это рассмотреть, расположим позиционированный элемент в коде страницы между блоками, находящимися в основном потоке, то есть, меджу первыми двумя блоками, которые мы создали.

Стиль:

29
30
31
32
33
34
35
#relleft
  {
  position: relative;
  left: 120px;
  top: 10px;
  width: 300px;
  }

HTML код:

40
41
<div id="relleft">Относительное позиционирование<br>
слева сверху</div>

Как я уже говорил, абсолютное позиционирование можно установить не тольно относительно окна браузера, но и относительно другого позиционированного блока. Чтобы рассмотреть этот способ, добавим на страницу элемент и зададим ему позиционирование относительно созданного ранее блока с относительным позиционированием. Для этого поместим элемент в коде страницы внутрь нужного блока. Теперь этот блок будет выглядеть так:

Стиль:

36
37
38
39
40
41
#absblock
  {
  position: absolute;
  left: 5px;
  bottom: 48px;
  }

HTML код:

46
47
48
49
50
<div id="relleft">Относительное позиционирование<br>
слева сверху
<div id="absblock">Абсолютное позиционирование<br>
относительно блока</div>
</div>

Смещение можно указывать с отрицательноым значением. При этом смещение будет производиться в противоположную сторону. Например нижняя граница элемента будет смещаться не вверх, а вниз. Для примера зададим только что созданному блоку отрицательное смещение. Посмотрите, куда он при этом переместится:

40
bottom: -40px;

Часто относительное позиционирование в CSS устанавливается без смещения. Блок остаётся на том же месте, где долже быть в основном потоке документа, но становится позиционированным. Это делается для того, чтобы позиционировать относительно него другие элементы.

ВАЖНО: По умолчанию, элементы в основном потоке располагаются не возле самого края окна браузера, а с некоторым отступом. У всех браузеров этот отступ разный. Из за этого невозможно точно разместить блок относительно элементов в основном потоке, потому что координаты элементов в разных браузерах не совпадают. Для решения этой проблемы какому-нибудь блоку устанавливается относительное позиционирование без смещения. И нужные блоки позиционируются относительно него. Так расположение позиционированных блоков относительно элементов основного потока получается во всех браузерах одинаковым.

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

Фиксированное позиционирование в CSS устанавливается каким-то особым элементам, которые не двигаются при прокрутке страницы и всегда остаются на экране. Координаты указываются так же, как при абсолютном позиционировании, но они не отсчитываются от внешнего блока, а только от границ окна браузера. Добавим на страницу блок с фиксированным позиционированием.

Стиль:

42
43
44
45
46
47
#fix
  {
  position: fixed;
  left: 400px;
  top: 10px;
  }

HTML код:

62
<div id="fix">Фиксированное позиционирование</div>

Попробуйте прокрутить страницу, Вы увидите, что фиксированный элемент остаётся на месте.

При любом виде позиционирования можно указать только одну координату. При этом блок будет находиться либо максимально вверху либо максимально слева.

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