Как показать один div поверх всех других, и все остальные дивы должны быть центрированы?

---

Я разрабатываю html-страницу.ссылка https://codepen.io/KARANVERMA5/pen/oqKJma .
Мне нужно, чтобы кнопка и индикатор выполнения были выровнены по центру и отображались за облаком слов.
Пожалуйста, укажите мне в правильном направлении, что здесь не так, почему полоса не отображается под словом-облаком. Как я могу показать wordcloud сверху и все остальные вещи divs ниже его по центру?

Что я уже пробовал:

    #word-cloud  {
    position:fixed;
    height: 100vh;
    max-height: 100%;
    width: 100vw;
    max-width: 100;
    margin:-300px auto auto -250px;
    top:20%;
    left:70%;
    text-align:center;
    z-index:1;
}

body,
html {
    margin: 0;
    padding: 0;
}


.bar {
    position:relative;
    border: 1px solid #666;
    height: 5px;
    width: 100px;
    margin:-300px auto auto -250px;
    z-index: 2;
}

.bar .in {
    -webkit-animation: fill 10s linear 1;
    animation: fill 10s linear 1;
    height: 100%;
    background-color: red;
}

@-webkit-keyframes fill {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

---