引导容器内绝对元素的位置答案

【问题标题】：Position of absolute element inside bootstrap container引导容器内绝对元素的位置
【发布时间】：2018-06-25 15:00:35
【问题描述】：

我有一张全角封面图片。在其中，我有一个引导容器类，它有一个绝对定位的图像，位于封面图像的顶部。我想做的就是将该图像仅定位到容器的右侧。

这是我的代码：

<div id="header">
    <div class="container">
        <img src="header-icon.png" class="header-icon" />
    </div>
</div>

#header {
  background-image: url('cover.jpg');
  background-size: cover;
  height: 300px;
  position: relative;

 .header-icon {
   position: absolute;
   bottom: 0;
 }
}

当然，当我将 right: 0 添加到 header-icon 时，它会在容器外对齐。当然，我可以创建媒体查询并尝试根据屏幕大小定位图标，但我想知道是否存在更好的方法。

我也尝试过使图标相对于容器，但这似乎破坏了我想要实现的目标。

【问题讨论】：

标签： html css twitter-bootstrap sass

【解决方案1】：

我不能 100% 确定您要达到的目标，但听起来您希望 right: 0 将图像与 container 的右侧对齐，而不是 header。

position: absolute 将根据第一个非静态定位的父元素绝对定位元素。现在，您拥有具有相对位置的 #header，但 .container 仍然具有静态位置。因此，您要将position: relative 应用于容器：

#header .container {
  position: relative;
}

另外，您发布的代码似乎缺少</div>。

【讨论】：

【解决方案2】：

这就是你要找的jsfiddle，这是我添加的代码

#header .container {
 position: relative;
 height: 400px;
 }

【讨论】：