Свойство bottom, left, right, top: смещение элементов. Справочник 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;}
— в первом примере смещение задано в пикселах;
— во втором — в процентах, где высота элемента ровно в два раза меньше высоты родителя, выступ произошёл из-за ширины рамки, а в принципе можно чётко поместить элемент в один из углов родительского блока:
Смещение элементов при абсолютном и относительном
позиционировании
В зависимости от значения свойства Position смещение элемента может быть неодинаково. При абсолютном позиционировании он смещается относительно границ родительского элемента, при относительном позиционировании, смещение происходит относительно нормального потока на заданные величины.
Пример:
.element { position: absolute; bottom: 30px; left: 30px; height: 70px; width: 70px; border: 2px solid #000;}
— для элемента задано абсолютное позиционирование; в примере на второй картинке — всё то же самое, только позиционирование относительное, т.е. свойство
Значения:
Используются принятые в CSS единицы, отрицательные значения смещают элемент наружу. Для относительно позиционированных элементов значение свойства Left всегда равно значению свойства Right, но с противоположным знаком. Для элементов static значение всегда будет auto, т.е. ноль.
• % — относительно высоты или ширины родительского элемента.
• auto — если Bottom и Top имеют значение auto — то это для обоих будет 0; если одно из них auto — то оно принимает значение другого, но с противоположным знаком; если значение Top задано — то значение Bottom будет auto, т.е. ноль. Значения тестировались в браузере Сhrome.
• inherit — наследование от родительского элемента.
Содержание:
Свойство bottom | CSS справочник
Определение и применение
CSS свойство bottom определяет смещение позиционированного элемента относительно нижнего края.
Результат применения свойства bottom напрямую зависит от позиционирования элемента к которому оно применяется, т.е. элемент будет смещаться в зависимости от значения свойства position:
- position: relative; (элемент с относительным позиционированием) - при использовании свойства bottom элемент смещается вверх или вниз относительно его текущей позиции (отрицательное значение смещает вниз, положительное вверх). На примере bottom: -25px;
- position: absolute; (элемент с абсолютным позиционированием) - при использовании свойства bottom смещается вверх или вниз относительно нижнего края его предка, при этом предок должен иметь значение position отличное от установленного по умолчанию - static, иначе отсчёт будет вестись относительно нижнего края окна браузера (как при position: fixed;). На примере bottom: 100px;
- position: fixed;(элемент с фиксированным позиционированием) - при использовании свойства bottom элемент смещается вверх или вниз относительно нижнего края окна браузера. На примере bottom: 25px;
- position: static; (элемент со статическим позиционированием - по умолчанию) - значение свойства bottom не повлияют на позиционирование элемента.
Поддержка браузерами
CSS синтаксис:
bottom:"auto | length | initial | inherit";
JavaScript синтаксис:
object.style.bottom = "5%"
Значения свойства
| Значение | Описание |
|---|---|
| auto | Позволяет браузеру вычислять положение от нижнего края. Это значение по умолчанию. |
| length | Определяет величину смещения (px, em, pt, и т.п.). Допускается использование отрицательных значений. |
| % | Величина смещения, указанная в процентах от содержащего элемента. Допускается использование отрицательных значений. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS2Наследуется
Нет.Анимируемое
Да.Пример использования
<!DOCTYPE html> <html> <head> <title>Свойство bottom.</title> <style>body { background-color:khaki; /* задаём задний фон цвета хаки */ } .relative { position:relative; /* элемент с относительным позиционированием */ bottom : -25px; * задаём смещение элемента вниз относительно его текущей позиции */ width 200px; /* задаём ширину блока */ height: 250px; /* задаём высоту блока */ border 5px solid; /* задаём стиль для границ сплошной и ширину 5px */ background-color:orange; /* задаём задний фон оранжевого цвета */ } .absolute { position:absolute; /* элемент с абсолютным позиционированием */ bottom : 100px; * задаём смещение элемента вниз относительно нижнего края его предка */ width 150px; /* задаём ширину блока */ height: 100px; /* задаём высоту блока */ border 5px solid green; /* задаём стиль для границ сплошной, ширину 5px и цвет зелёный */ } .fixed { position:fixed; /* элемент с фиксированным позиционированием */ bottom : 25px; * задаём смещение элемента вниз относительно нижнего края окна браузера */ width 150px; /* задаём ширину блока */ height: 100px; /* задаём высоту блока */ border 5px solid red; /* задаём стиль для границ сплошной, ширину 5px и цвет красный */ } </style> </head> <body> <div class = "relative">div position:relative;</div> <div class = "absolute">div position:absolute;</div> <div class = "fixed">div position:fixed;</div> </body> </html>
Изменяем свойствами left, top, right и bottom положение элемента — Позиционирование — codebra
Введение
Сместить элемент по условным осям координат можно при помощи свойств left, top, right и bottom. Для их использования, необходимо, чтобы элемент был позиционированным, т.е. значение свойства position для него было отлично от static. Что делают эти свойства:
left– отображает расстояние, на которое будет смещен элемент от левого края, в сторону правого.top– отображает расстояние, на которое будет смещен элемент от верхнего края, в сторону нижнего.right– отображает расстояние, на которое будет смещен элемент от правого края, в сторону левого.bottom– отображает расстояние, на которое будет смещен элемент от нижнего края, в сторону верхнего.
В случае если задано отрицательное число, то элемент будет смещаться в противоположную сторону. Далее рассмотрим синтаксис:
Код CSS
left: размер | проценты | auto
top: размер | проценты | auto
right: размер | проценты | auto
bottom: размер | проценты | auto Размер может быть задан в любых единицах измерения, разрешенных в CSS. Теперь рассмотрим, как влияет значение, заданное в свойстве position.
Если для элемента свойство position задано как absolute
В данном случае родительским элементом является окно браузера, т.е. отсчет начинается от его краев. Если для свойства top задать 10%, то элемент сместится на 10% вниз от окна браузера.
Если для элемента свойство position задано как relative
В таком случае элемент будет смещаться относительно своего исходного положения. Если для свойства right задать 25px, то элемент сместится влево на 25 пикселей, относительного того места, на котором он находился.
Если для элемента свойство position задано как absolute, а для родителя – relative
Теперь элемент будет изменять свое положение относительно родительского блока.
bottom | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от свойства position, оно обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).
При относительном позиционировании элемента, отсчет ведется от нижнего края исходного положения элемента, а при абсолютном — относительно нижнего края окна браузера (рис. 1). Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от нижнего края родителя (рис. 2).
Рис. 1. Значение bottom при абсолютном позиционировании элемента
Рис. 2. Значение bottom относительно родителя
Если одновременно задано свойство top и bottom со значениями отличными от auto, то свойство bottom игнорируется.
Синтаксис
bottom: значение | проценты | auto | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства bottom может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента.
- auto
- Не изменяет положение элемента.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>bottom</title> <style> #layer { bottom: 20px; /* Расстояние от нижнего края окна браузера */ position: absolute; /* Абсолютное позиционирование */ background: #f0f0f0; /* Цвет фона */ padding: 7px; /* Поля вокруг текста */ border: solid 1px black; /* Параметры рамки */ } </style> </head> <body> <div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> </body> </html>
Результат данного примера показан на рис. 3.
Рис. 3. Применение свойства bottom
Объектная модель
[window.]document.getElementById("elementID").style.bottom
Браузеры
В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom.
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.