试图将一个元素放在另一个元素上

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;
              }