Bottom

Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да

 

CSS CSS2
Значение по умолчанию Нет
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет

Описание

Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от свойства position, оно обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).

При относительном позиционировании элемента, отсчет ведется от нижнего края исходного положения элемента, а при абсолютном — относительно нижнего края окна документа. Если для родительского элемента задано positionrelative, то абсолютное позиционирование дочерних элементов определяет их положение от нижнего края родителя.

Если одновременно задано свойство top и bottom со значениями отличными от auto, то свойство bottom игнорируется.

Синтаксис

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

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства bottom может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента.

auto
Не изменяет положение элемента.
inherit
Наследует значение родителя.

Пример

<!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=windows-1251">   <title>bottom</title>   <style type="text/css">    #layer {     bottom: 20px; /* Расстояние от нижнего края окна браузера */     position: absolute; /* Абсолютное позиционирование */     background: #f0f0f0; /* Цвет фона */     padding: 7px; /* Поля вокруг текста */     border: solid 1px black; /* Параметры рамки */    }   </style>  </head>   <body>       <div id="layer">    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem     nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat     volutpat. </div>      </body> </html>

Объектная модель

[window.]document.getElementById("elementID").style.bottom

Браузеры

В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom.

Internet Explorer до седьмой версии включительно не поддерживает значение inherit.