Html 将Div定位到图像的末尾

我正在尝试将一个row类与图像的底部对齐。我希望它粘在底部而不移动。我已经添加了一条关于我想坚持哪一部分的评论。它从带有id#offer的页脚标记开始

HTML:

---

position:absolute

就是你要找的。你可以在这里阅读更多关于它的信息-

添加父元素的

位置：相对
，以及
位置：绝对；底部：0；左：0；右：0至
#报价


#ImageMain{
背景图片：url(https://techvibes.com/wp-content/uploads/2016/06/11169410_445386015628115_4871226287313974850_o.jpg);
背景重复：无重复；
背景尺寸：封面；
高度：1000px；
文本对齐：居中；
颜色：白色；
右边距：自动；
左边距：自动；
填充顶部：0px；
位置：相对位置；
}
#提议{
背景色：rgba（0,0,0,0.5）；
填充：40px；
位置：绝对位置；
底部：0；
左：0；
右：0；
}
#我提议，
h2，
p{
颜色：白色；
}
#提议我{
字体大小：35px；
}







简单是最低限度的
快速运输
您的订单将在第二天通过UPS Express Shipping运出。国际订单通过DHL Express运出

容易的回报
对我们的产品不满意吗？尺寸太大/太小？我们将接受您的退货，并将您的钱退还/免费运出您合适的尺码

关怀顾客服务
我们的24/7客户服务代表将帮助您解决每一个问题，并且已经并将努力满足您的需求

非常感谢您！最后一个问题，我如何使我的“报价”部分的不透明性不影响里面的文字？@GabrielPozo如果你有新问题，你应该试着解决它，如果你不能让它工作，就写一篇新文章。请避免在评论中要求您的问题范围之外的其他帮助。也就是说，使用
rgba（）
并删除
opacity
。更新了我的答案以反映这一点。感谢您的提醒，如果给您带来任何不便，我很抱歉@加布里埃尔·波佐不用担心。不过，一定要对有帮助的答案投赞成票，一旦你觉得问题解决了，就接受答案。
<div id="ImageMain">

<ul id="nav">
    <li id="brand"><a href="#">MINIMAL</a></li>
    <li id="navm"><a href="#">Men</a></li>
    <li id="navm"><a href="#">Women</a></li>
    <li id="navm"><a href="#">Contact</a></li>
</ul>

<h1>Simplicity is Minimal</h1>

<a href="#" id="homeb">Shop Now</a>

<!--I'm trying to make this section stick to the bottom of #ImageMain-->

<footer id="offer">

<div class="row">
    <div class="col-md-4" align="center">
        <i class="fa fa-truck" aria-hidden="true"></i>
        <h2>Fast Shipping</h2>
        <p>Your order(s) are shipped out the next day with UPS Express Shipping. International orders are shipped out with DHL Express</p>
    </div>

    <div class="col-md-4" align="center">
        <i class="fa fa-reply" aria-hidden="true"></i>
        <h2>Easy Returns</h2>
        <p>Not satisfied with our product? Sizing too big/small? We will accept your return and grant your money back/ship out your right size hassle free</p>
    </div>

    <div class="col-md-4" align="center">
        <i class="fa fa-phone" aria-hidden="true"></i>
        <h2>Caring Customer Service</h2>
        <p>Our 24/7 customer service reps will help you with every question and have and will work to satifsy your needs</p>
    </div>

</div>

</footer>

</div>

#ImageMain {
background-image: url(https://techvibes.com/wp-content/uploads/2016/06/11169410_445386015628115_4871226287313974850_o.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 1000px;
text-align: center;
color: white;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}

#offer {
background-color: black;
padding: 40px;
opacity: 0.5;
margin-top: 263px; /* This is what I want to fix. I'm not sure of the code I have to use to position it to make it stick to the bottom and be able to resize-*/
}

#offer i, h2, p {
color: white;
} 

#offer i {
font-size: 35px;
}