Размещение CSS - атрибут z-index

z-index атрибут указывает порядок наложения элементов.

атрибут z-index

Когда элементы позиционируются, они могут перекрываться другими элементами.

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

порядок наложения элементов может быть положительным или отрицательным:

Это заголовок

Потому что у изображения z-index установлен в -1, поэтому он будет помещен за текст.

пример

img {
  положение: абсолютное;
  лев: 0 пикселей;
  верх: 0 пикселей;
  z-index: -1;
}

Попробуйте сами

注意:z-index только дляэлементы позиционирования(положение: абсолютное,положение: относительное,положение: фиксированное или положение: sticky) иэластичные элементы(display: flex непосредственный подэлемент элемента).

Другой пример z-index

пример

Здесь мы видим, что элементы с более высоким порядком наложения всегда находятся над элементами с более низким порядком наложения:

<html>
<head>
<style>
.container {
  положение: относительное;
}
.black-box {
  положение: относительное;
  z-index: 1;
  рамка: 2 пикселя сплошная черная;
  height: 100px;
  отступ: 30 пикселей;
}
.gray-box {
  положение: абсолютное;
  z-index: 3;
  фondo: светло-серый;
  высота: 60 пикселей;
  ширина: 70%;
  лев: 50 пикселей;
  верх: 50 пикселей;
}
.green-box {
  положение: абсолютное;
  z-index: 2;
  фondo: светло-зеленый;
  ширина: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Черный ящик</div>
  <div class="gray-box">Серый ящик</div>
  <div class="green-box">Зеленый ящик</div>
</div>
</body>
</html>

Попробуйте сами

без z-index

если два элемента позиционирования не указаны z-index в случае наложенияВ HTML-коде последний определенныйэлемент будет отображаться поверх всех.

пример

Как и в предыдущем примере, но здесь не указано z-index：

<html>
<head>
<style>
.container {
  положение: относительное;
}
.black-box {
  положение: относительное;
  рамка: 2 пикселя сплошная черная;
  height: 100px;
  отступ: 30 пикселей;
}
.gray-box {
  положение: абсолютное;
  фondo: светло-серый;
  высота: 60 пикселей;
  ширина: 70%;
  лев: 50 пикселей;
  верх: 50 пикселей;
}
.green-box {
  положение: абсолютное;
  фondo: светло-зеленый;
  ширина: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Черный ящик</div>
  <div class="gray-box">Серый ящик</div>
  <div class="green-box">Зеленый ящик</div>
</div>
</body>
</html>

Попробуйте сами

Свойства CSS

Свойства Описание
z-index Установка порядка堆ления элементов.