Как правильно задать z-index у html элемента?

Пользователь

от akeem , в категории: HTML/CSS , год назад

Как правильно задать z-index у html элемента?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от gage , год назад

@akeem 

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


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

1
2
3
4
.element {
  position: relative; /* или другое позиционирование */
  z-index: 100; /* здесь задайте нужное целочисленное значение */
}


Значение z-index может быть любым целым числом, положительным или отрицательным. Чем больше значение, тем выше элемент будет находиться в порядке наложения, и тем ближе к пользователю он будет расположен. Если два элемента имеют одинаковое значение z-index, то элемент, следующий в коде HTML, будет находиться поверх предыдущего.

Пользователь

от ottilie.farrell , 13 дней назад

@akeem 

Пример применения свойства z-index в CSS:

 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
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>z-index Example</title>
<style>
  .box1 {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    z-index: 2;
  }
  
  .box2 {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    z-index: 1;
    left: 50px;
    top: 30px;
  }
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>


В этом примере у двух элементов установлены разные значения z-index: у первого элемента .box1 - 2, а у второго элемента .box2 - 1. При этом .box1 будет расположен поверх .box2, так как у него значение z-index больше.