Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

bottom

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

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

Тип свойства

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

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

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

Значения

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

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

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

Синтаксис

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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 1CSS 2CSS 2.1CSS 3
Поддержка:НетДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.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, когда размеры блока не заданы явно.