bottom
Поддержка браузерами
| 12.0+ | 5.0+ | 1.0+ | 1.0+ | 6.0+ | 1.0+ |
Описание
CSS свойство bottom указывает смещение позиционированного элемента относительно нижнего края. Как именно свойство bottom будет смещать элемент, зависит от конкретного значения свойства position:
- Элемент с фиксированным позиционированием (position: fixed;) смещается вверх/вниз относительно нижнего края окна браузера.
- Элемент с абсолютным позиционированием (position: absolute;) смещается вверх/вниз относительно нижнего края его первого позиционированного (не static) элемента предка. Если у элемента нет предка с позиционированием (relative, absolute или fixed), тогда он будет смещаться относительно нижнего края окна браузера.
- Элемент с относительным позиционированием (position: relative;) смещается вверх/вниз относительно нижнего края его текущей позиции.
- Для элемента со статическим позиционированием (position: static;) применение свойства bottom не даст никакого эффекта.
Примечание: допускается использование отрицательных значений.
| Значение по умолчанию: | auto |
|---|---|
| Применяется: | к позиционированным элементам |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS2 |
| Синтаксис JavaScript: | object.style.bottom="50px" |
Синтаксис
bottom: auto|величина|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| auto | Элемент остаётся на своём месте. |
| величина | Определяет величину смещения в единицах измерения, используемых в CSS. |
| % | Величина смещения, указанная в процентах, обрабатывается следующим образом:
|
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
CSS Свойство:
bottom:
Результат:
Измените значение свойства, чтобы увидеть результат.
CSS Код:
div#myBox {
margin-top: 50px;
background-color: yellow;
width: 100px;
position: relative;
bottom: 0px;
}
margin-top: 50px;
background-color: yellow;
width: 100px;
position: relative;
bottom: 0px;
}