Що таке 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. Ось, що у нас вийшло:Як бачите, шари є корисними і дозволяють вказувати, який блок має бути показаний поверх інших блоків.
Коментарі
