Свойство CSS z-index

Как работать сz-indexсвойство в CSS

впозиционирование постаЯ упоминал, что вы можете использоватьz-indexсвойство для управления позиционированием элементов по оси Z.

Это очень полезно, когда у вас есть несколько элементов, которые перекрывают друг друга, и вам нужно решить, какой из них виден ближе к пользователю, а какой должен быть скрыт за ним.

Это свойство принимает число (без десятичных знаков) и использует это число для вычисления того, какие элементы появляются ближе к пользователю по оси Z.

Чем выше значение z-index, тем ближе элемент к пользователю.

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

Значение по умолчанию -auto, специальное ключевое слово. С помощьюauto, порядок оси Z определяется положением HTML-элемента на странице - последний брат появляется первым, поскольку он определен последним.

По умолчанию элементы имеютstaticценность дляpositionсвойство. В этом случаеz-indexсвойство не имеет никакого значения - оно должно быть установлено наabsolute,relativeили жеfixedработать.

Пример:

.my-first-div {
	position: absolute;
	top: 0;
	left: 0;
	width: 600px;
	height: 600px;
	z-index: 10;
}

.my-second-div { position: absolute; top: 0; left: 0; width: 500px; height: 500px; z-index: 20; }

Элемент с классом.my-second-divбудет отображаться, а за ним.my-first-div.

Здесь мы использовали 10 и 20, но вы можете использовать любое число. Отрицательные числа тоже. Обычно выбирают непоследовательные числа, поэтому вы можете расположить элементы посередине. Если вместо этого вы используете последовательные числа, вам нужно будет повторно вычислить z-индекс каждого элемента, участвующего в позиционировании.

Скачать мою бесплатнуюСправочник CSS


Больше руководств по css: