Расположение элементов на странице. Position

Свойство position используется для определения позиции элемента на сайте. Возможные значения свойства position:
  • static - значение по-умолчанию. Элементы идут друг за другом (блочные сверху вниз, а строчные слева направо).
  • fixed - устанавливает позицию элемента относительно окна браузера. При скроллинге страницы элемент не перемещается.
  • absolute - позиция элемента устанавливается с помощью свойств left, top, right, bottom и считается от левого верхнего края страницы. Элемент с position:absolute не будет участвовать в верстке, т.е. этот элемент будет расположен поверх других элементов (если у них будет позиционирование static).
  • relative - похож на абсолютное позиционирование, но расчет позиции производится не от левого верхнего края страницы, а от изначального положения элемента. Так же он участвует в верстке страницы (т.е. элементы будут обтекать его согласны своим свойствам).
Разберём небольшой пример:
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
.absolute, .relative, .fixed, .static {
    height:50px;
    border:1px solid #aaa;
    padding:20px;
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
}
 
.absolute {
    position:absolute;
    left:20px;
}
 
.relative {
    position:relative;
    top:20px;
}
 
.static {
    position:static; left:20px;
}
 
.fixed {
    position:fixed;
    top:20px;
}
 
#positions {
    display:none;
}
 
.visible {
    display: block !important;
}
1
2
3
4
5
6
7
<div onclick="$('#positions').toggleClass('visible');">Показать/Скрыть</div>
<div id="positions">
    <div class="absolute">absolute</div>
    <div class="relative">relative</div>
    <div class="static">static</div>
    <div class="fixed">fixed</div>
</div>
Пример работы этих свойств:
Показать/Скрыть
absolute
relative
static
fixed
Заметьте, что absolute и fixed свободно "наезжают" на другие элементы, т.к. не участвуют в общей верстке. Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru