bottom

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Значение по умолчанию	auto
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Иначе, свойство bottom устанавливает положение нижнего края элемента от нижнего края родителя. Данное свойство используется совместно со свойством position фиксирующим положение элемента. Так же свойство будет иметь актуальность, если не указано свойство top или его значение установлено как auto,из-за встречного расположения значений, которые браузер может переорентировать в совокупность. Числовые значения могут быть не только положительными, но и отрицательными. Разумеется свойство может вообще не применяться, всё зависит от ситуации с соседними позиционируемыми элементами.

Свойство применимо к элементам позиционирования, создано в версии CSS2 и проходит валидацию согласно версии CSS3.

При относительном позиционировании элемента, отсчет ведется от нижнего края исходного положения элемента, а при абсолютном — относительно нижнего края окна браузера (рис. 1). Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от нижнего края родителя (рис. 2).

Рис. 1. Значение bottom при абсолютном позиционирование элемента

Рис. 2. Значение bottom относительно родителя

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

Синтаксис

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

Значения

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

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

Пример

<!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 id="layer">
 Здесь какой-то текст. Здесь какой-то текст.Здесь какой-то текст.Здесь какой-то текст.
 Здесь какой-то текст. Здесь какой-то текст.
 </div> 
 </body>
</html>

Результат применение свойства bottom

Пример 2

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство bottom</title>
<meta charset="utf-8">
<style type="text/css">
<!--
.element {
position:absolute;
left:30px;
bottom:30px;
padding:15px;
border:15px dashed #0ba1d5;
background:indigo;
color:#ffffff;
text-decoration:blink;
}
.roditel {
position:relative;
border:15px solid #0ba1d5;
width:80%;
height:150px;
background:#000000;
}
-->
</style>
</head>
<body>
<div class="roditel">
<div class="element">
Этот текст позиционируется нижним краем, от нижнего края родителя на 30px
</div>
</div>
</body>
</html>

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

Этот текст позиционируется нижним краем, от нижнего края родителя на 30px

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

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

Браузеры

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

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

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Позиционирование | Добавил: evkuriy (10.07.2013)

Просмотров: 579 | Теги: свойства CSS, позиционирование | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]