почему div находится под изображением

Question

Я хочу поместить div над изображением, но я не знаю, почему он всегда находится под этим событием, если я установил атрибут z-index

мой код любит:

<main id="content" role="main">
  <div style="text-align: center">
    <img src="assets/header-img.jpg" style="z-index: -1;">
  </div>

  <div class="container" style="background-color: bisque; height: 1000px; margin-top: -680px"></div>
</main>

есть два вопроса:

1. Я хочу переместиться вверх контейнер-div, поэтому я использую "margin-top: -680px",680px - высота изображения.Есть ли другое необязательное решение?
2. как переместить контейнер-div над изображением?

Answer 1

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

Позиционирование по умолчанию - static, которое не учитывает z-index.

<main id="content" role="main">
  <div style="text-align: center">
    <img src="assets/header-img.jpg" style="position: relative; z-index: 0;">
  </div>

  <div class="container" style="background-color: bisque; height: 1000px; position: relative; top: -680px; z-index: 1"></div>
</main>

Answer 2

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

Чтобы div сначала был ... просто поместите его первым.Я приложил фрагмент кода, чтобы показать рабочий пример.

<main id="content" role="main">
  <div class="container" style="background-color: bisque; height: 1000px;"></div>
  <div style="text-align: center">
    <img src="assets/header-img.jpg">
  </div>
</main>