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

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

Статьи для сайтов!!!
Главная Свойства CSS CSS по шагам Позиционирование. Слои Плавающие элементы

Позиционирование элементов. Слои в CSS

Position Bottom Left Right Top
Z-index

Абсолютное позиционирование
Относительное позиционирование
Слои в CSS. Координата Z


По умолчанию все элементы на странице располагаются последовательно:

- блочные элементы располагаются один под другим,
- строчные элементы располагаются один за другим.

В CSS есть возможность управлять позиционированием элементов, благодаря которому Вы можете нарушить установленный порядок их расположения и размещать элементы в нужном Вам месте страницы.

Позиционирование осуществляется при помощи свойства position. Оно устанавливает способ позиционирования и может быть применено ко всем элементам.

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

Абсолютное позиционирование

Значение absolute свойства position устанавливает абсолютное позиционирование элемента.

При абсолютном позиционировании координаты нового положения элемента задаются с помощью свойств top,right, bottom и left:

- относительно краев окна браузера, если родительского элемента нет или если для него свойству position присвоено значение static (значение по умолчанию).

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

Отличительной особенностью абсолютного позиционирования является освобождение элементом ранее занимаемого пространства: освобожденная область может быть занята другим элементом.

При значении fixed свойства position элемент также будет абсолютно позиционированным. Но при этом элемент фиксируется в точке с координатами, заданными свойствами top,right, bottom и left: он не прокручивается вместе с содержимым страницы.

Пример

Фрагмент кода:

<p style="border:#CC0000 solid 1px; padding:5px;">
<img src=
"img/peng_64.gif"> Пингвин располагается в левой части абзаца - так как он и должен располагаться по умолчанию.
</p>

<p style="border:
#CC0000 solid 1px; padding:5px;">
<img src=
"img/peng_64.gif" style="position:fixed; top:300px; right:220px;"> Текст сместился на место, ранее занимаемое пингвином. А пингвин зафиксирован!
</p>

Результат:


Статичное положение: static Пингвин располагается в левой части абзаца - так как он и должен располагаться по умолчанию.

Абсолютное позиционирование - FixedТекст сместился на место, ранее занимаемое пингвином. А пингвин зафиксирован!


В приведенном примере для пингвина во втором абзаце установлено значение fixed для свойства position и заданы координаты при помощи ключевых слов top и right.

Отсчет координат ведется от краев окна браузера, так как у родительского элемента (абзаца - тега <p>) свойство position не указано, следовательно, оно принимает значение по умолчанию static.

Таким образом пингвин расположен на расстоянии 300 пикселей от верхнего края и 220 пикселей от правого края окна браузера. И он не прокручивается вместе с содержимым страницы: Вы все время его видите в одном и том же фиксированном месте (см. направо).

Относительное позиционирование

Значение relative свойства position устанавливает относительное позиционирование элемента.

При относительном позиционировании координаты нового положения элемента также задаются с помощью свойств top,right, bottom и left.

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

Пример

Фрагмент кода:

<p style="border:#CC0000 solid 1px; padding:5px;">
<img src=
"img/peng_64.gif"> Пингвин располагается в левой части абзаца - так как он и должен располагаться по умолчанию.
</p>

<p style="border:
#CC0000 solid 1px; padding:5px;">
<img src=
"img/peng_64.gif" style="position:relative; bottom:10px; left:100px;"> Текст не сместился на место, ранее занимаемое пингвином: оно как бы осталось за ним!
</p>

Результат:


Статичное положение: static Пингвин располагается в левой части абзаца - так как он и должен располагаться по умолчанию.

Относительное позиционирование Текст не сместился на место, ранее занимаемое пингвином: оно как бы осталось за ним!


В приведенном примере для пингвина во втором абзаце установлено значение relative для свойства position и заданы координаты при помощи ключевых слов bottom:10px и left:100px.

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

Слои в CSS. Координата Z

Условно каждый элемент имеет две координаты (так как мы имеем дело с плоскостью) X и Y, которые определяют его положение на странице.

В CSS есть возможность задавать для элементов третью - пространственную координату Z, тем самым имитируя третье измерение и позволяя элементам накладываться друг на друга.

Выходит так, как будто мы работаем со слоями. Это понятие знакомо тем, кто имел дело с каким-либо графическим редактором, например с Adobe Photoshop.

Свойство z-index реализует эту возможность: оно задает значение координаты Z, определяя номер слоя, на котором располагается элемент, и тем самым устанавливая порядок наложения элементов друг на друга

Значением свойства z-index может быть любое целое положительное число или 0. Чем больше значение Z, тем выше слой располагается по отношению к слоям с меньшим значением координаты.

Например, слой с номером 3 будет ближе к пользователю, чем слои с номерами 2 и 1 или слой без заданной координаты Z.

По умолчанию свойству z-index присваивается значение auto или 0. А на переднем плане располагается тот элемент, который в исходном коде HTML описан ниже, так же как и при равных значениях свойства z-index.

Свойство применяется к позиционированным элементам, то есть к элементам для которых установлено свойство position со значением absolute, fixed или relative.

Пример

Фрагмент кода:

<!DOCTYPE ...>
<html>
<head>
<meta http-...>
<title> Свойство z-index </title>

<style type="text/css">
.z0 {position:absolute; font-size:60px; color:#FF0000; z-index:2; top:30px}
.z1 {
position:absolute; font-size:70px; color:#6699FF; z-index:1; left:20px}
</style>

</head>
<body>

<p class=
"z0"> Привет! </p>
<p class=
"z1"> Привет! </p>

</body>
</html>

Результат:

Пояснение к примеру: Красный "Привет" ближе к пользователю, так как для него установлено большее значение свойства z-index, равное 2. В то время как для синего "Привета" z-index равно 1.

Высота и ширина блоков Позиционирование. Слои Плавающие элементы
CSS по шагам
Дизайн сайтов
ПОИСК ПО САЙТУ:

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