Почему значение z-index не применяется или не действует на элементы?

Как можно изменить код, чтобы текст отображался поверх изображения, а не оставался позади?
  • 12 ноября 2023 г. 11:08
Ответы на вопрос 2
Значение z-index не действует на элементы в том случае, если у них установлено свойство position со значением static. Чтобы значение z-index начало действовать, необходимо установить для элемента одно из следующих свойств position: relative, absolute или fixed.

Чтобы изменить код так, чтобы текст отображался поверх изображения, можно сделать следующее:

HTML:
```html
<div class="container">
  <img src="image.jpg" alt="Изображение">
  <div class="text">Текст</div>
</div>
```

CSS:
```css
.container {
  position: relative;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
```

В данном примере мы задаем родительскому элементу с классом "container" свойство position: relative, чтобы создать контекст для позиционирования потомков. Затем мы устанавливаем свойство position: absolute для элемента с классом "text" и устанавливаем его расположение с помощью свойств top, left и transform, чтобы текст отобразился в центре родительского элемента. Наконец, мы устанавливаем значение z-index равным 1, чтобы текст отображался поверх изображения.
Откройте Dev Tools браузера для просмотра стилей текста. Стили info__img-title, info__img-text и info__download имеют свойство position со значением relative и z-index со значением 10. Если вы измените позицию текста на relative, то z-index будет применяться только к тексту в контексте absolute элемента (картинки) и двух relative элементов (два параграфа). Такое использование z-index будет иметь смысл.
Похожие вопросы