内部 div 未定位到右下角答案

【问题标题】：Inner div not positioning to bottom right内部 div 未定位到右下角
【发布时间】：2016-07-21 04:50:02
【问题描述】：

我有一个嵌套有两个 div 的 Bootstrap 网格列：父 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;
        }

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您可能希望将子项的宽度设置为 90%，删除子项上的 float 和 margin-top。看到这个：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%;
}

【讨论】：

将整个子 div 向上移动。

【解决方案2】：

您需要子元素相对于父 div 而不是 html 页面的主体定位自身。在父元素的 CSS 中添加position:relative;。

【讨论】：

我将该行代码添加到 #col-7 并且子 div 没有向右移动。我在另一次尝试中将该行代码添加到.row-eq-height，但孩子没有向右移动。子 div 在底部，但不在右下角。
到目前为止，您必须发布一个指向您的工作代码小提琴的链接，以便进一步排除故障。
对不起。您对right:0 的回答就是解决方案。我现在解决了按钮问题。再次抱歉。