Смещение элементов в CSS

css

Содержание:



Свойства BOTTOM, LEFT, RIGHT, TOP

Свойство Значения Пр* Нc*
bottom
left
right
top
ДЛИНА, %, auto, inherit * -

Эти свойства определяют смещение между внешним краем позиционированного элемента и краем его родительского элемента: Top — от верхнего края, Bottom — от нижнего, Left и Right — от левого и правого. Если родитель у элемента отсутствует, то началом отсчёта служат границы окошка браузеров.

Область применения*: позиционированные элементы, для которых значение свойства Position отлично от static.

Пример:

.element { position: absolute; top: 50px; right: 50px; height: 70px; width: 70px; border: 2px solid #000;}
.element { position: absolute; top: 50%; right: 50%; height: 70px; width: 70px; border: 2px solid #000;}

— в первом примере смещение задано в пикселах;
— во втором — в процентах, где высота элемента ровно в два раза меньше высоты родителя, выступ произошёл из-за ширины рамки, а в принципе можно чётко поместить элемент в один из углов родительского блока:

смещение элементов в css

Смещение элементов при абсолютном и относительном
позиционировании

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

Пример:

.element { position: absolute; bottom: 30px; left: 30px; height: 70px; width: 70px; border: 2px solid #000;}
— для элемента задано абсолютное позиционирование; в примере на второй картинке — всё то же самое, только позиционирование относительное, т.е. свойство Position со значением relative:

смещение элемента при абсолютном и относительном позиционировании

Значения:

Используются принятые в CSS единицы, отрицательные значения смещают элемент наружу. Для относительно позиционированных элементов значение свойства Left всегда равно значению свойства Right, но с противоположным знаком. Для элементов static значение всегда будет auto, т.е. ноль.

% — относительно высоты или ширины родительского элемента.
auto — если Bottom и Top имеют значение auto — то это для обоих будет 0; если одно из них auto — то оно принимает значение другого, но с противоположным знаком; если значение Top задано — то значение Bottom будет auto, т.е. ноль. Значения тестировались в браузере Сhrome.
inherit — наследование от родительского элемента.

Содержание: