Почему псевдоэлемент впереди, хотя Z-индекс ниже, чем родитель? [дублировать] ⇐ CSS

[Anonymous]

Я думаю, что упускаю что -то очень очевидное ...
У меня есть этот кусок HTML и CSS < /p>

Код: Выделить всё

content


:global(:root) {
--fg-color: palevioletred;
}

.input-container {
position: relative;
margin-top: 2rem;
z-index: 10;
margin: 1rem auto;
width: 500px;
background-color: #aaa;
}

.input-container::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: red;
left: 50%;
top: 50%;
translate: -50% -50%;
z-index: -1;
padding: 3px;
box-sizing: content-box;
}

, который вы также можете использовать здесь:
https://codepen.io/robinkohrs/pen/leyydpx
Я хотел псевдо -Элемент для создания границы (через его прокладку ...) вокруг. INPUT-Container -Element. Тем не менее, псевдоэлемент полностью наверху, что делает все красным, хотя я установил Z-индекс как что-то действительно низкое. Почему это?>

Подробнее здесь: https://stackoverflow.com/questions/794 ... han-parent