Как получить этот div выше другого div?

Question

Я не могу получить этот div выше другого div, который есть в Bootstrap.В основном у меня есть два div внутри другого div.У одного из div есть изображение, а у другого - текст.

Я пробовал много вещей, таких как изменение поля с помощью CSS, но по какой-то причине это не работает.

<div id="header" class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-dark">
        <div>
            <img id="andro" class="img-fluid">
        </div>
        <div id="mainP" class="bg-dark mx-auto mx-auto center-block">
          Text in here
        </div>
    </div>


#andro{
    max-width: 100%;
    float: left;
    opacity: .5;
    margin: 0;
    z-index: 5;
}

#mainP{
    z-index: 10;
    position: absolute;
    margin: auto;
    margin-right: 50vw;
}

Так что я хочу, чтобы div "mainP" был выше div "andro", но я не знаю, почему этого не произойдет, когда я пытаюсь изменить поля и z-index с помощью CSS.

Answer 1

Если вы заключите два внутренних div в div с .row в качестве класса, вы можете использовать классы перезаписи, встроенные в загрузчик.https://getbootstrap.com/docs/4.0/layout/grid/#reordering

  <div id="header" class="row position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-dark">
            <div class="order-2">
                <img id="andro" class="img-fluid">
            </div>
            <div id="mainP" class="order-1 bg-dark mx-auto mx-auto center-block">
              Text in here
            </div>
        </div>

Answer 2

Надеюсь, это может вам помочь.

Пожалуйста, оберните изображение и текстовый контейнер (#mainP) в одно деление.

Пожалуйста, попробуйте ниже CSS.

    #mainP{
    z-index: 1;
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom: 0;
    background-color: rgba(255,255,255,0.7);
}

   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 

<div class="position-relative d-inline-block">
            <img id="andro" src="https://images.all-free-download.com/images/graphicthumb/orange_crush_514795.jpg" class="img-fluid">
             <div id="mainP" class="d-flex justify-content-center align-items-center">
          Text in here
        </div>
        </div>

Answer 3

В своем описании вы дали id для img, а не для div.

PS.Ваш код не завершен.Пожалуйста, добавьте как CSS, так и HTML или рабочий образец через codepen / Fiddle.Мы не сможем помочь, не увидев, что именно идет не так.