bottom | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Четверг, 08.12.2016
Главная » Справочник CSS3 » Позиционирование


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


bottom | Свойство CSS

Свойство bottom позиционирует элемент от нижнего края.




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




Дополнительные значения bottom


Значение
Описание
<Процент>Устанавливает положение исходя из процентного соотношения с родителем
<Число>Устанавливает положение с применением числовых значений,возможны отрицательные значения
autoБраузер сам определяет положение от нижнего края
inheritНаследует значения родителя


Свойство работает в браузерах




Пример применения свойства bottom



<!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>

Пример в действии




Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom
Категория: Позиционирование | Добавил: IZOTOP (20.04.2012) | Автор: Меренков Михаил E W
Просмотров: 638 | Теги: css, свойство, style, Что делает, для чего, Bottom, что это | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

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