• Главная»
  • Уроки»
  • CSS»
  • CSS слои, абсолютное и относительное позиционирование, z-index

CSS слои, абсолютное и относительное позиционирование, z-index

Сегодняшний урок, как и вчерашний, поведает Вам о позиционировании в CSS, а также про очень интересное свойство под названием z-index.

С помощью этого свойства можно располагать блоки текста (и не только текста) друг над другом, при этом получая что-то наподобие 3Д эффекта.

demosourse

Данный урок будет очень полезен новичкам в веб дизайне, так как кроме теоретической информации, мы рассмотрим и практический пример.

Многие новички в CSS полностью не разбираются в разных типах позиционирования. Для этого можете почитать подробный урок про типы позиционирования в CSS (ссылка).

Для наглядности посмотрите на два изображения ниже:

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

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

Как Вы видите, при относительном позиционировании, блок с текстом размещается по отношению к абзацу с текстом. При абсолютном - по отношению к окну браузера.

z-index

Работу данного свойства проще всего также объяснить изображением:

Элемент с более высоким значением будет находиться выше.

Теперь давайте более подробно рассмотрим наше демо.

Создание 1-го блока

HTML

<div id="layer1">
<h2>Layer 1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
</div>

CSS

#layer1 {
background:#707070;
color:#fff;
position:relative;
width:800px;
height:450px;
}

С помощью стилей придаем данному блоку относительное позиционирование. Благодаря этому можем размещать дополнительные блоки внутри.

Создание 2-го блока

По аналогии с 1-м блоком создаем блок. Отличается этот блок только идентификатором (id="layer2").

HTML

<div id="layer2">
<h2>Layer 2</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
</div>

CSS

#layer2 {
background:#f9ad81;
color:#fff;
position:absolute;
top:40px;
left:50px;
width:400px;
height:400px;
z-index:1;
}

Второму блоку придаем абсолютное позиционирование. Теперь он точно будет внутри первого и никуда не денется. Кроме этого, определяем атрибут z-index (=1). Это значит, что блок №2 будет находиться над первым.

Создание 3-го блока

HTML

<div id="layer3">
<h2>Layer 3</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
</div>

CSS

#layer3 {
background:#6dcff6;
color:#fff;
position:absolute;
top:80px;
left:100px;
width:600px;
height:200px;
z-index:2;
}

В этом блоке z-index = 2.

В демо версии я добавил еще один блок для наглядности.

Вы можете попробовать поменять местами индексы у блоков и посмотреть на результат.

Запомните, что элемент с меньшим z-index всегда будет находиться под элементом с высшим. То есть, Вы можете придать блоку №1 индекс = 999, а блоку №2 - 1000. Результат будет такой же.

На сегодня все! Спасибо за внимание!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.onextrapixel.com
Перевел: Максим Шкурупий
Урок создан: 2 Сентября 2009
Просмотров: 56339
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 3 Сентября 2009 00:16
    Павел
    спасибо
  • 3 Сентября 2009 09:41
    Snatch
    Пока пробовать не стал, но интересует вопрос: а как z-index дружит с 6 эксплоером??
  • 3 Сентября 2009 15:14
    Александрдр
    увидал на ezco.ru менюху и уснуть немогу а кликнул на ФОРУМ и апче опупевший(форумом там не пахнет но меню-пля красивое... эт мне в z-index "капать" теперь подскажите =)
  • 3 Сентября 2009 21:17
    Dimka
    Александрдр там же флеш меню))
  • 4 Сентября 2009 10:08
    animhotep
    я у позишина еще одну прикольную вещ заметил. htmlcss.com.ua/index.php?showtopic=199
  • 4 Сентября 2009 20:04
    Дмитрий
    Вопрос не по теме, но всетаки скажите пожалуйста - чем лучше делать сайт? полностью div или table, почему именно так, какие + и - При помощи table легче но все почему то делаю на div...
  • 4 Сентября 2009 23:41
    DiZavr
    Я, Дмитрий ответ на вопрос не по теме, всё от того зависит какой тебе нужен сайт... если там доминанта-текст то проще div'ом оформить через CSS а я, как и многие мучу бакгрррр... потом делю пространства таблицей(т.е. подгоняю сих) и фсё... там вешай наваротофф сколько шаришь, так же проще ? тыж не дипломную декану в html пишешь... картинка фона очень важна а с ней одним div'ом думаю не справишься...!!! Ребят я не прав ?
  • 4 Сентября 2009 23:54
    DiZavr
    Александрдр прикольное меню, сам с две недели только html как начал позновать... подружка вынудила... открыла фирму и грит нужен сайт а покупать дорого =) мути в конструкторе типа !!! а я повёлся на рекламку- сайт своими руками =) скачал, и началась она со строк=поймём html и затянуло, тоже хочу фишки типо в ezco.ru науччиться только о FLASH к сожелюхе уроков пока не встречал... воопчем комент раАзмыт шикарно пивом но вопросик в душе... а мож конструкторы полезней ? или ну их нахер раз html по зубам !!!
  • 26 Сентября 2009 22:08
    Михаил
    Спасибо! Очень помог лично мне этот урок. :)
  • 20 Декабря 2009 10:26
    Morgan
    Нормальный урок спасибо
  • 24 Февраля 2010 12:53
    oziris
    админы pvsart.uz/css/15-css-sloi-absolyutnoe-i-otnositelnoe.html
  • 24 Февраля 2010 13:29
    Сергей_Патин
    oziris, спасибо за ссылку.
  • 16 Июня 2010 23:43
    Лита
    Спасибо, я ужасно мучилась с этим z-index, в моей книжке по html ни слова про него, а всё так просто оказалось:)
  • 13 Января 2012 01:24
    DumpCruiser
    Сэкономил пару часов благодаря статье. Максиму и Евгению спасибо ).
^ Наверх ^