内部div不在右下角

Question

I have a Bootstrap grid column nested with two divs: The parent div is an image and the child div is an opaque color. I am attempting to align the child div to the bottom right of the parent div. However, when I apply absolute positioning for this alignment, the whole div inappropriately moves upward. Any suggestions of how to prevent this upward movement yet align the child div ( oqaque-7 ) to the bottom right of the parent div ( col-md-4 ).

The 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-->

The 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

You might want to give the width of the child as 90% , remove float and margin-top on the child. See this: 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%;
}

Answer 2

You'll need the child element to position itself relative to the parent div instead of the body of the html page. Add position:relative; to the CSS of the parent element.