Слои с помощью 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 можно применять к любым HTML элементам. Если есть два слоя с разными z-index, то выше будет тот слои, который имеет большее значение z-index.