内側のdivは右下に配置されていません

Question

私は2つの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ページの本体に対して自分自身を配置するために子要素が必要になります。親要素のCSSにposition:relative;を追加します。

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%; 
}