CSS позиционирование

В этой главе:

  • Поток документа

  • Статическое позиционирование

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

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

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

  • Перекрывающие элементы

CSS позиционирование - это управление местом и способом отображения элемента на веб-странице, оно осуществляется с помощью свойства position.

Для указания точного места расположения позиционированных элементов, используйте свойства: toprightbottomleft. Они работают со всеми позиционированными элементами, кроме статических.

Пример позиционирования.

Элементы могут перекрывать друг друга!

Отображение элемента над остальными!

Свойство position имеет 4 значения: static, fixed, relative, absolute. Каждое из этих значений будет продемонстрировано ниже с примером использования.

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

Поток документа

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

Общий поток элементов можно изменить посредством CSS. Используя свойства float и position можно убрать элемент из общего потока. Когда элемент перестает находиться в общем потоке, с помощью свойств top, left, right, bottom вы можете перемещать элемент, тем самым изменяя его расположение, которое установлено по умолчанию.

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

Статическое позиционирование

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

При применении CSS свойств top, left, right или bottom к статически позиционированному элементу, они будут игнорироваться.

Если есть необходимость, то можно задать статическое позиционирование в таблице стилей с помощью значения static:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p { position: static; }
    </style>
  </head>
 
  <body>
    <p>Первый абзац.</p>
    <p>Второй абзац.</p>
  </body>
</html>

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

Элементы с фиксированным позиционированием располагаются на странице относительно окна браузера. Такие элементы удаляются из общего потока, элементы, следующие в потоке за фиксированным элементом, будут игнорировать его, смещаясь и занимая его место на веб-странице.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      img {
        position: fixed;
        top: 5%;
        left: 40%
      }
    </style>
  </head>
 
  <body>
    <img src="donald.gif">
     <pre>Текст
      Текст
      Текст
      Текст
      Текст
      Текст
      Текст
      Какой-то текст
      Текст
      Текст
      Текст
      Текст
      Текст</pre>
  </body>
</html>

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

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

Такие элементы не влияют на расположение окружающих их элементов, остальные элементы остаются на своих местах и могут быть перекрыты относительно позиционированным элементом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      h2 {
        position: relative;
        top: 30px;
      }
    </style>
  </head>
 
  <body>
    <h1>Заголовок первого уровня.</h1>
    <h2>Относительно позиционированный заголовок.</h2>
    <h3>Заголовок третьего уровня.</h3>
  </body>
</html>

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

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

Элементы с абсолютным позиционированием полностью удаляются из общего потока, остальные элементы будут занимать освободившееся пространство, полностью игнорируя абсолютно позиционированные элементы. Затем можно позиционировать элемент в любое нужное место веб-страницы, используя свойства top, left, right или bottom.

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

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      img {
        position: absolute;
        right: 0px;
        top: 0px;
      }
    </style>
  </head>
 
  <body>
    <img src="image.jpg">
    <p>Изменим расположение логотипа с помощью абсолютного позиционирования.<br>
      Теперь логотип будет располагаться в правом верхнем углу страницы.</p>
  </body>
</html>

Перекрывающие элементы

Когда элементы находятся вне общего потока страницы, они могут перекрывать друг друга. Обычно порядок расположения элементов соответствует их порядку в HTML-коде страницы, однако есть возможность управлять порядком перекрытия с помощью CSS свойства z-index, чем больше его значение, тем выше будет элемент.

Попробуйте сами:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      div {
        position: absolute;
        width: 100px;
        height: 100px;
      }
      .div1 {
         background-color: #66FFFF;
         left: 70px;
         top: 0px;
         z-index: 1;
      }
      .div2 {
         background-color: #FFFF66;
         left: 0px;
         top: 30px;
         z-index: 0;
      }
      .div3 {
         background-color: #66FF66;
         left: 33px;
         top: 60px;
         z-index: 2;
      }
    </style>
  </head>
 
  <body>
    <div class="div1">z-index: 1;</div>
    <div class="div2">z-index: 0;</div>
    <div class="div3">z-index: 2;</div>
  </body>
</html>