内部div不定位于右下角

Question

我有一个由两个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%;
}