Попытка поместить элемент поверх другого элемента

Question

Мне нужна поддержка с моим кодом.Свойство z-index не работает.Я пытаюсь наложить свой «бриллиант» на этот элемент, и я делаю это не так, как хочу.

            .diamond {
                position: relative;
                height: 100%;
                width: 100%;
                line-height: 200px;
                text-align: center;
                margin: 10px 40px;
                z-index: 1;
              }

              .diamond:before {
                position: absolute;
                content: '';
                height: 150px;
                width: 150px;
                transform: rotateX(45deg) rotateZ(45deg);
                background: $secondary-color;
                top: -40px;
              }