Опубликовано: 18.08.2010 Последняя правка: 08.12.2015

bottom

Свойство CSS bottom используется для указания расстояния смещения вверх (или вниз) нижнего края позиционируемого элемента относительно нижнего внутреннего края рамки (CSS border) одного из его элементов-предков или окна браузера (абсолютное позиционирование) либо относительно начального положения нижнего края самого элемента (относительное позиционирование). Это зависит от значения свойства position как самого элемента, так и его предков.

HTML-элементы называются предками для тех тегов, которые находятся внутри них на любом уровне вложенности, а родительскими для тех, которые находятся внутри них на первом уровне. Естественно предки являются одновременно и родительскими элементами для своих потомков первого уровня вложенности (дочерних).

Тип свойства

Назначение: позиционирование.

Применяется: к позиционируемым элементам, то есть тем, у которых свойство CSS position имеет значения absolute, fixed или relative.

Наследуется: нет.

Значения

Значением свойства CSS bottom является указание расстояния одним из следующих способов:

Проценты — значения в процентах (%), где за 100% берется высота элемента-предка по следующему алгоритму:
1. Для относительно позиционируемых элементов (relative) берется высота ближайшего блочного (block) элемента-предка, встроенного блока (inline-block) или ячейки таблицы, а если таких нет, то высота тела документа (тег <BODY>).
2. Для фиксированных абсолютно позиционированных элементов (fixed) берется высота окна браузера.
3. Для абсолютно позиционированных элементов (absolute) берется высота элемента относительно которого происходит позиционирование с учетом его внутренних отступов (CSS padding), а если такого нет, то высота окна браузера.
Разрешено указывать отрицательные процентные значения (-20%).
Размеры — относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Для них также разрешены отрицательные значения.
auto — положение нижнего края элемента по вертикали, как без применения позиционирования.
inherit — наследует значение CSS bottom от родительского элемента.

Процентная запись: исходя из высоты элемента, относительно которого происходит позиционирование, или окна браузера.

Значение по умолчанию: auto.

Синтаксис

bottom: размеры | проценты | auto | inherit

Пример CSS: использование bottom

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство bottom</title>
  <style type="text/css">
   .div1 {
    width: 100%; /* ширина блока DIV1 */
    height: 3000px; /* его высота */
    background: #ffcc33; /* фоновый цвет */
   }
   .div2 {
    width: 200px; /* ширина блока DIV2 */
    background: #cc33ff; /* фоновый цвет */
    position: absolute; /* абсолютное позиционирование */
    bottom: 50px; /* расстояние смещения вверх */
   }
  </style>
 </head>
 <body>
  <div class="div1">
   <div class="div2">
    Так как ни у одного элемента-предка данного блока DIV2 нет
    свойства position со значением отличным от static, то абсолютное
    позиционирование высчитывается от края окна браузера.
   </div>
  </div>
 </body>
</html>

Результат примера

Версии CSS

Версия:	CSS 1	CSS 2	CSS 2.1	CSS 3
Поддержка:	Нет	Да	Да	Да

Браузеры

Браузер:	Internet Explorer		Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6.0 и 7.0	8.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Частично	Да	Да	Да	Да	Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit. Internet Explorer 6.0 не изменяет размеры позиционируемого блока при одновременном указании свойств CSS top и bottom или left и right, когда размеры блока не заданы явно.

Разделы сайта

CSS по алфавиту

CSS по назначению