Знаете ли вы, почему у меня возникла эта проблема? ⇐ Html

[Anonymous]

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

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

// Boxes
.boxes {
display: grid;
grid-gap: 70px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
margin: 5% 0 5% 0;
}

.box {
width: 74.5%;
height: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
padding: 2rem 3rem;
border-radius: 11px;
}

.box h1 {
font-size: 37px;
padding-top: 3.2rem;
margin: 0;
}

.box p {
font-size: 20px;
padding: 1.5rem 0 1.5rem 0;
margin: 0;
}

.black-back {
position: absolute;
width: 100%;
height: 400px;
background: black;
left: 0;
bottom: 0;
z-index: -1;
}

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

Gyms
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem, eveniet.

Classes
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem, eveniet.

Activities
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem, eveniet.

Я хочу, чтобы это было так, как показано на этом изображении

Refresh Image

Вот ссылка на мой сайт, где вы можете проверить, где я хочу разместить этот черный прямоугольник

https://www.fitardo.com/

Подробнее здесь: https://stackoverflow.com/questions/602 ... is-problem