如何从引导覆盖选项卡内容？

Question

我正在创建一个加载的“全屏”，该容器的容器必须与所有元素重叠。

不仅将标签内容容器重叠，还将其向下推。

填充标签

<main id="pills-tabs-section">
        <div class="tab-content">
                <div role="tabpanel" id="pills-register" class="tab-pane fade show active" aria-labelledby="pills-register-tab"></div>
                <div role="tabpanel" id="pills-indicators" class="tab-pane fade show" aria-labelledby="pills-indicators-tab"><!-- HAVE ACCORDIONS --></div>
        </div>
</main>

加载

<section id="loading-global" data-component-name="loading-global">
    <div class="container-fluid d-flex flex-column align-items-center justify-content-center">
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
        <div>
            <h3>Carregando...</h3>
        </div>
    </div>
</section>

载入样式

@mixin loading-global($container-bg-color, $spinner-bg-color, $text-bg-color) {
    section#loading-global[data-component-name="loading-global"] {
        .container-fluid {
            height:   100%      !important;
            position: absolute  !important;
            z-index:  99999     !important;
            background-color: getCustomColor($container-bg-color);

            div:last-child {
                h3 {
                    @include margin-vertical(1.5rem, auto);
                    font-weight: 500;
                    color: getCustomColor($text-bg-color);
                }
            }

            div.spinner-border {
                width:  5rem;
                height: 5rem;
                color: getCustomColor($spinner-bg-color);
            }
        }
    }

    section#loading-global[data-component-name="loading-global"][data-element-state="actived"]    { display: block !important; }
    section#loading-global[data-component-name="loading-global"][data-element-state="desactived"] { display: none !important;  }


}