Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная CSS по шагам Свойства CSS Position Right

Свойство position

Описание

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

Это свойство применимо ко всем элементам.

Значение

- absolute - абсолютное позиционирование. Положение элемента на странице меняется в зависимости от указанных координат, которые задаются с помощью свойств (ключевых слов): top, right, bottom и left .

При абсолютном позиционировании отсчет координат ведется от краев окна браузера, если родительского элемента нет или если для него свойству position присвоено значение static. И отсчет ведется от краев родительского элемента, если для него свойству position присвоено значение absolute, fixed или relative.

При этом ранее занимаемую область элемент освобождает - на его месте могут располагаться другие элементы.

- relative - относительное позиционирование. Положение элемента на странице меняется в зависимости от указанных координат, которые задаются с помощью свойств (ключевых слов): top, right, bottom и left .

Отсчет координат ведется относительно первоначального места положения элемента.

При этом ранее занимаемую область он не освобождает - это место не могут занять другие элементы.

- fixed - аналогично абсолютному позиционированию. Но при этом элемент фиксируется - не прокручивается вместе с остальным содержимым страницы.

- static - положение элементов на странице не меняется.

Значения для свойств top, right, bottom и left задаются в единицах длины, принятых в CSS (подробнее здесь...).

- inherit - принимает значение свойства родительского элемента.

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

- static


Пример

Пример - Свойство position

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство position </title>

<style type="text/css">
p{border:#FF0000 solid 2px; height:150px; width:700px; font-size:18px;}
</style>

</head>
<body>

<p> <img src="../img/peng_64.gif" align="left" style="border:#33CCFF solid 2px;"> Применим к данному изображение относительное позиционирование. Отcчет новых координат будет вестись относительно его исходного положения. </p>
<p> <img src="../img/peng_64.gif" align="left" style="border:#33CCFF solid 2px; position:relative; top:30px; left:50px;"> Область, ранее занимаемая изображением, как бы осталась за ним. </p>

<p> <img src="../img/peng_128.gif" align="left" style="border:#33CCFF solid 2px;"> К пингвину данного абзаца применим абсолютное позиционирование. Отcчет новых координат будет вестись относительно краев окна браузера. </p>
<p> <img src="../img/peng_64.gif" align="left" style="border:#33CCFF solid 2px; position:absolute; top:555px; left:555px;"> Ранее занимаемую позицию пингвин освободил. Эту область занял текст. </p>

</body>
</html>

При просмотре в браузере


Свойство Padding-top Свойство Position Свойство Right
Свойства CSS
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru