Свойство position используется для определения позиции элемента на сайте.
Возможные значения свойства position:
Пример работы этих свойств:
Заметьте, что absolute и fixed свободно "наезжают" на другие элементы, т.к. не участвуют в общей верстке.
Спасибо за внимание.
- 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