Поместите div на передний план моей HTML страницы - PullRequest
Новая
       55

Поместите div на передний план моей HTML страницы

0 голосов
/ 16 января 2020

У меня есть HTML страница, которая выглядит следующим образом: enter image description here Вот код: 

    .animation-panel{border-right:1px solid #353738;height:calc(100vh - 150px);overflow:scroll;color:rgba(255, 255, 255, 0.5);}
    #card-container{height:calc(100vh - 150px);width:400px;overflow-x:hidden;padding:2px;flex:6;}

    .blue-box{position:absolute;margin:-250px 10px 10px -110px;float:left;font-family:Verdana;font-style:normal;font-weight:normal;z-index:1;-webkit-box-sizing:initial;box-sizing:initial;}


    .container{position:relative;margin-left:auto;margin-right:auto;padding-right:15px;padding-left:15px;}

    @media (min-width:992px){
        .container{width:960px;max-width:100%;}
    }
    @media (min-width:1200px){
        .container{width:1140px;max-width:100%;}
    }
    .row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px;}

    .col{padding-right:15px;padding-left:15px;}
    .col{-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;}

    .col{
        border: solid green;
        min-height: 400px;
        min-width: 200px;
    }
<main role="main" class="container page-header">
    <div class="row mt-1">
        
        <div id="card-container" class="col">
        </div>
        <div class="col mt-1 pt-2 bg-inverse animation-panel">
            <div>
                <div class="red-box" style="z-index: 1031;position: fixed;top: 30%;left: 60%;margin: 10px;height: 10px;width: 300px;background: red;"></div>
            </div>
            <div class="big-anim-box">
                <div class="anim-container"></div>
            </div>
            <br>
            <div class="">
                <div class="">
                    <div role="combobox" aria-expanded="true" class="ui active visible fluid search selection upward dropdown" style="
                  position: relative;
                  z-index: 1 !important;
                  ">
                        <div class="blue-box " style="
                     height: 800px;
                     width: 100px;
                     background: blue;
                     position: absolute;
                     top: 0;
                     left: 0;
                     z-index: 3000000;
                     ">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

Пожалуйста, как поставить синюю коробку (.blue-box) на переднем плане или поверх всего, как красная коробка (.red-box)?

Я попробовал этот стиль: 

position: absolute;
            z-index: 3000000;

на .blue-box:

Но это ничего не меняет, синий ящик все еще остается на заднем плане некоторых div. Пожалуйста, помогите!

...