Что такое z-index в CSS3?
Представим у нас есть два блока, которые наложены друг на друга. Мы хотим чтобы первый блок был виден поверх второго блока, но как это сделать? Здесь на помощь как раз и приходят слои. Рассмотрим все на примере.
У нас есть два блока, которые расположены следующим образом:
Мы видим, что второй блок просто перекрыл первый блок. На данный момент у нас в коде еще не прописаны слои и выглядит наш CSS код следующим образом:
#first {
background: #e56868;
width: 100px;
height: 100px;
position: relative;
}
#second {
background: #6db8e3;
width: 100px;
height: 100px;
position: relative;
top: -50px;
right: -50px;
}Теперь добавим новое свойство к первому блоку:
z-index: 1. Поскольку наш второй блок вообще не имеет никакого слоя, то он автоматически равен нулевому слою. Первый блок будет иметь слой на 1 выше, а значит отображаться он будет поверх второго блока. Важно также отметить, что оба блока должны иметь свойство position: relative. Вот что у нас получилось:Как видите,
слои полезны и позволяют указывать какой блок должен быть показан поверх других блоков.
Комментарии
