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


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



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


position | Свойство CSS

Свойство position позиционирует элемент.




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




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

Значение
Описание
staticУстанавливает положение исходя из соотношения с родителем ( по умолчанию ),заданные свойства top,left,right и bottom не работают
relativeУстанавливает положение исходя из соотношения с родителем,возможно применение свойств top,left,right и bottom
absoluteУстанавливает абсолютное положение элемента относительно положения родителя который имеет положение отличимое от статического.Положение зависит от применяемых свойств top,left,right и bottom
fixedУстанавливает фиксированное положение исходя из окна браузера и свойств top,left,right и bottom.При прокрутке элемент будет оставатся не прокручиваясь с остальным содержимым
inheritНаследует значения родителя


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




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



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство position</title>
<meta charset="utf-8">
<style type="text/css">
<!--
.roditel {
position:absolute;
width:99%;
height:100px;
border:5px double #0ba1d5;
background-color:indigo;
}
.element {
position:fixed;
top:10%;
left:10%;
border:5px double #0ba1d5;
padding:5px;
background-color:green;
}
-->
</style>
</head>
<body>
<div class="roditel">
<div class="element">
Вот посмотрите как распологается родительский элемент со значением position:absolute;,в который вложен элемент со свойством position:fixed;
</div>
</div>
</body>
</html>

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




Генератор свойства position для z-index



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





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






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

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

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