Курс HTML5, CSS3, SEO, Wordpress и Photoshop

Слои с помощью z-index

С помощью CSS можно накладывать HTML элементы друг на друга. Например писать надписи над рисунками (основное практическое применение).

Как всегда, начнем с примера, создадим в одной папке два документа, один page.html а другой style.css и поместим одно изображение (например с названием rose.jpg).

page.html:
<!doctype html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<html>
<body>
<div id='image'><img src='rose.jpg'></div>
<div id='text'>
Это текст над рисунком!
</div>
</body>
</html>

style.css:
#text {
position: absolute;
top: 150px;
left: 100px;
z-index: 5;
color: white;
font-size: 20px;
}

#image {
z-index: 4;
}

А изображение у нас такое:
Красивая роза!

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

Слои с помощью z-index

Параметр z-index может принимать только целые значения. z-index можно применять к любым HTML элементам. Если есть два слоя с разными z-index, то выше будет тот слои, который имеет большее значение z-index.