z-index HTML. Не понимаю почему не работает

Question

.container {
  width: 500px;
  font-family: sans-serif;
  font-size: 20px;
  margin: 0 auto;
  border: 5px solid gray;
  padding: 5px;
  box-sizing: border-box;
}

.target {
  padding: 20px;
  background-color: darkseagreen;
  width: 100px;
  height: 85px;
  border-radius: 6px;
  position: absolute;
  top: 13px;
  right: 518px;
  z-index: 0;
}

<div class="container">
        <p>
            Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon 
            amaranth tatsoi tomatillo melon azuki bean garlic.
        </p>
        <div class="target">
            Target
        </div>
        <p>
            Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea 
            sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber 
            earthnut pea peanut soko zucchini.
        </p>
  </div>

Почему когда я Таргету прописываю z-index: 0, то у меня он не уходит на второй план? Я хочу чтобы текст не закрывал

Answer 1

Многие ошибочно думают, что z-index работает, например, как слои в Photoshop, и числовое значение z-index будет неким "порядковым номером" в иерархии слоёв.

Но это не так, у каждого элемента по умолчанию z-index равен нулю.
Т.е. если вы хотите, чтобы текущий элемент "уходил на второй план", т.е. был "за" своим родителем, то требуется указать z-index: -1;, но даже тут есть нюансы:

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

Более подробно про z-index - Понимание CSS z-index

БЛОГ НА HUSL

z-index HTML. Не понимаю почему не работает

Ответы (1 шт):