Внутренний div не позиционируется вправо справа

Question

У меня столбец Bootstrap, вложенный в два div: родительский div - это изображение, а дочерний div - непрозрачный. Я пытаюсь выровнять дочерний div в нижнем правом углу родительского div. Однако, когда я применяю абсолютное позиционирование для этого выравнивания, весь div неправильно перемещается вверх. Любые предложения о том, как предотвратить это восходящее движение, выровняйте дочерний div (oqaque-7) в нижнем правом углу родительского div (col-md-4).

HTML-:

<div class="row-eq-height"> 
     <div class="col-md-4" id="col-7"> 
       <div class="opaque-7"> 
        <h4>ABC</h4> 
        <h3>ddddddddddd eeeeee</h3> 
        <h3>PPPPP</h3> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis euismod nvallis vel. Fusce Vitae Quisque venenatis euismod</p> 
         <button type="button" class="btn btn-secondary" id="btn-7" onclick="location.href='/#/'"> 
            DISCOVER 
         </button> 
       </div><!--.opaque-7--> 
      </div><!--.col-md-4--> 
</div><!--.row-eq-height--> 

CSS-:

  .row-eq-height{ 
      display: flex; 
      flex-wrap: wrap; 
     } 
     #col-7{ 
      background-image:url('/site/templates/images/image.jpg'); 
      border: none; 
     } 
     .opaque-7{ 
      background-color:#24B5B0; 
      filter: alpha(opacity=80); 
      -moz-opacity: 0.8; 
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 
      -khtml-opacity: 0.8; 
      opacity: 0.8; 
      padding-left:5%; 
      padding-top:10%; 
      padding-bottom:10%; 
      bottom:0; 
      margin-top:40%; 
      position: absolute; 
      float:right; 
     } 
     #col-7 h4{ 
      color: white; 
      text-align: left; 
     } 
     #col-7 h3{ 
      color:white; 
      text-align:left; 
      margin-top:-10px; 
     } 
     #col-7 p{ 
      color:white; 
      text-align: left; 
     } 
     #btn-7{ 
      background-color:#30CFCA; 
      color:white; 
      float:left; 
      margin-top: 10%; 
      margin-bottom: -6%; 
      display: block; 
     } 

Answer 1

Вам нужно дочерний элемент позиционировать себя относительно родительского DIV вместо тела страницы HTML. Добавьте position:relative; в CSS родительского элемента.

Answer 2

Возможно, вы захотите указать ширину ребенка как 90%, удалите поплавок и крайнее покрытие на ребенка. Смотрите это: https://jsfiddle.net/GunWanderer/asugvrw9/

.opaque-7{ 
    background-color:#24B5B0; 
    filter: alpha(opacity=80); 
    -moz-opacity: 0.8; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 
    -khtml-opacity: 0.8; 
    opacity: 0.8; 
    padding-left:5%; 
    padding-top:10%; 
    padding-bottom:10%; 
    bottom:0; 
    position: absolute; 
    right: 0; 
    width: 90%; 
}