«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг «Установка и продажа окон» Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Любая тема сайта - 4900 руб. Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


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

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

В 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>
<html>
<head>
<meta charset="utf-8">
<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.

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

CSS по шагам
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Все cвойства CSS
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта