Когда несколько элементов перекрывают друг друга на странице, то один из них оказывается выше других и перекрывает часть других элементов. С помощью свойства z-index можно указать, какой элемент должен перекрывать какие другие элементы. Это свойство работает только для элементов, у которых свойство position установлено в relative, absolute или fixed.
Возможные значения: <целое_число> | auto
Можно использовать отрицательные, положительные числа (но только целые) и ноль. Чем больше значение, тем выше будет находиться элемент. Элемент с большим значением будет перекрывать элемент с меньшим значением. Если значения элементов одинаковы, то элемент, объявленный на странице позже, будет перекрывать элемент, объявленный раньше.
auto — автоматическое определение. Элемент, объявленный на странице позже, будет перекрывать элемент, объявленный раньше.
Значение по умолчанию: auto
Наследуется: нет
Пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <title>CSS z-index example</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style> div { position:absolute; width:100px; height:100px; border: 1px solid black; } </style> </head> <body> <div style="top:10px; left:10px;background-color:#ff0000;z-index:1;"> чуть ниже </div> <div style="top:20px; left:20px;background-color:#00ff00;z-index:2;"> самый верхний </div> <div style="top:30px; left:30px;background-color:#0000ff;z-index:0;"> самый нижний </div> <div style="top:140px;"> <a href="https://urvanov.ru/2016/02/29/css-z-index/">CSS z-index</a> </div> </body> </html> |