Тег position позицирования элемнетов страницы , relative , absolute , fixed , static , inherit .

Теги - position relative , absolute , fixed , static , inherit

Пример :

<div style="position: relative;">content</div> <div style="position: relative;">content</div> <div style="position: relative;">content</div> <div style="position: relative;">content</div>

№ 1 relative; top: 0px; left: 0px;

№ 2 relative; top: 0px; left: 0px;

№ 3 relative; top: 0px; left: 0px;

№ 4 relative; top: 0px; left: 0px;

( Для наглядности и взаимного расположения элементов применён стиль style="border: 1px #000 solid;" - бордюр чёрного цвета )

Расположение элементов определяется значением тегов position , top , bottom , left , right . По умолчанию значения тегов top , bottom , left , right равно нулю . Элементы последовательно выстраиваются в соответствии с порядком следования в HTML , на взаимное положение элементов может влиять сочетание значений других тегов стилей . Допустимые единицы измерения размера : px , pt , in , cm , mm , pc , em , ex , % .

Пример :

<div style="position: relative; left: 20px; top: 5px;">content</div> <div style="position: relative; right: 20px; top: 0px;">content</div> <div style="position: relative; left: 0px; bottom: 5px;">content</div> <div style="position: relative; right: 5px; bottom: -20px;">content</div>

№ 1 relative; left: 20px; top: 5px;

№ 2 relative; right: 20px; top: 0px;

№ 3 relative; left: 0px; bottom: 5px;

№ 4 relative; right: 5px; bottom: -20px;

( Для наглядности и взаимного расположения элементов применён стиль style="border: 1px #000 solid;" - бордюр чёрного цвета )

Расположение элементов определяется значением тегов top , bottom , left , right . Смещение элементов по значениям тегов left , right отсчитывается от левой границы элемента , а по вертикали от линии нулевых значений тегов top , bottom местоположения элементов . Положительные значения тега left образует смещение вправо , а значение тега right влево . Отрицательные значение тега left равнозначно действию отрицательного заначения тега right и наоборот . Аналогично действие положительного и отрицательного значениий тегаов top , bottom , положительные значения тега top и отрицательные тега bottom смещают элемент вниз а отрицательные значения тега top и положительные тега bottom смещают элемент вверх . Допустимые единицы измерения размера : px , pt , in , cm , mm , pc , em , ex , % .

Пример :

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

Пример :

<div style="position: absolute; left: 0px; top: 30px;">content</div> <div style="position: absolute; right: 20px; top: 0px;">content</div> <div style="position: absolute; left: 20px; bottom: 0px;">content</div> <div style="position: absolute; right: 0px; bottom: 23px;">content</div>

№ 1 top: 30px; left: 0px;

№ 2 top: 0px; right: 20px;

№ 3 bottom: 0px; left: 20px;

№ 4 bottom: 23px; right: 0px;

( Для наглядности и взаимного расположения элементов применён стиль style="border: 1px #000 solid;" - бордюр чёрного цвета )

Расположение элементов при абсолютном позицировании определяется значением тегов top , bottom , left , right . Смещение по горизонтали определяется по значениям тега left от левой границы а тега right от правой границы элемета в котором расположен элемент , смещение по вертикали задаётся значением тега top от верхней а тегом bottom от нижней границы . значения могут быть как полдожительными так и отрицательными по значению . Допустимые единицы измерения размера : px , pt , in , cm , mm , pc , em , ex , % .

Пример :

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