Z-Index не подчиняется

Question

Мои иконки социальных сетей должны находиться за заголовком и прикрепленными элементами внизу окна просмотра. Независимо от того, какие комбинации z-index я пробую, иконки социальных сетей все равно будут наверху. Z-индекс ниже 100 заставляет их исчезнуть.

Код проблемы:

<div class="xmaze-socials">
    <div class="xmaze-icon">
    <a href="#" target="_blank"><i class="edgtf-icon-font-awesome fab fa-facebook edgtf-icon-element" style="font-size:15px"></i></a>   
    </div>
    <div class="xmaze-icon">
    <a href="#" target="_blank"><i class="edgtf-icon-font-awesome fab fa-youtube edgtf-icon-element" style="font-size:15px;margin-left:-2px;"></i></a>
    </div>
    <div class="xmaze-icon">
    <a href="#"><i class="edgtf-icon-font-awesome fab fa-instagram edgtf-icon-element" style="font-size:15px"></i></a>
        </div>
</div>

Стиль, примененный к этому коду:

<style>
    @media (max-width: 425px) {
        .xmaze-socials {
            display: none;
            z-index: 9998;
            right: 0;
            left: 0;
            top: 79vh;
            margin: 0 auto;
            position: absolute;
            width: 115px;
            padding-left: 10px;
        }
    }
    @media (min-width: 426px) {
        .xmaze-socials {
            position: absolute;
            z-index: 9998;
            right: 3.678vw;
            top: 40px;
        }
    }
    .xmaze-socials a:before {
        content: '';
        width: 35px;
        height: 35px;
        -moz-border-radius: 50%;
        border-radius: 50%;
        z-index: -2;
        position: absolute;
        background: #790f82;
        margin-left: -11px;
        margin-top: -4px;
    }
    .xmaze-icon {
        letter-spacing: 13px;
        display: unset;
    }
    .xmaze-icon i {
        margin-top: 6px;
    }
</style>

Вы можете увидеть проблему вживую навеб-сайт: www.xmaze.com Используйте Google Devtools, чтобы высота окна составляла ~ 600 пикселей, лучше всего так выглядит.

Они должны находиться за этим фиксированным элементом:

 <div id="def-sticky-button" class="vc_row wpb_row vc_row-fluid def-sticky- button" style="display: block;">
<div class="wpb_column vc_column_container vc_col-sm-12 vc_col-xs-12">
    <div class="vc_column-inner">
        <div class="wpb_wrapper">
            <div class="wpb_raw_code wpb_content_element wpb_raw_html">
                <div class="wpb_wrapper">
                    <button id="left-btn" style="color:#FFFFFF;background- color:#F40FFF;" class="left-btn hide-score " data-hover-bg-color="fc3cfe" data- hover-border-color="#fc3cfe" onclick="changePos()"> <span class="edgtf-btn-text stick-btn">Season 1</span> </button>
                    <button id="right-btn" style="color:#FFFFFF;background-color:#F40FFF;" class="right-btn " data-hover-bg-color="fc3cfe" data-hover-border- color="#fc3cfe"> <span class="edgtf-btn-text stick-btn">Events</span> </button>
                </div>
            </div>
        </div>
    </div>
</div>

Стиль:

    @media (min-width: 426px) {
    .sticky-score {
        position: fixed;
        display: none;
        bottom: 0;
        z-index: 25;
        margin: 0 !important;
    }
}
.sticky-score .wpb_column.vc_column_container.vc_col-sm-4 .vc_column-inner {
    padding: 0!important;
}
.def-sticky-button {
    position: fixed;
    bottom: 6.981826525929325VW;
    z-index: 10001;
    display: none;
}
.zero-bottom {
    bottom: 0 !important;
}
.stick-btn {
    font-weight: 300 !important;
}
@media (max-width: 425px) {
    .mob-scrl {
        width: 100vw;
        height: auto;
        position: fixed;
        bottom: 0;
        z-index: 10000;
        overflow-x: scroll;
        margin: 0 !important;
        padding: 0 !important;
    }
    .sticky-score {
        width: 300vw;
        margin: 0;
        display: none;
    }
    .left-btn {
        left: 0;
        right: auto;
        position: fixed;
        margin-left: -1px !important;
    }
    .right-btn {
        right: 0;
        left: auto;
        position: fixed;
    }
    .right-btn, .left-btn {
        width: 50%;
    }
    .def-sticky-button {
        bottom: 31.7vw;
    }
}
    .right-btn, .left-btn {
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        font-family: inherit;
        font-size: 13px;
        line-height:2em;
        border-radius: 0;
        outline: 0;
        box-sizing: border-box;
        cursor: pointer;
        text-align: center;
        padding: 8px 30px;
        letter-spacing: .06em;
        text-transform: uppercase;
        border: none;
    }