html - 绝对元素在 Bootstrap 容器中的位置

Question

我有一张全 Angular 封面图片。在其中，我有一个 Bootstrap 容器类，其中包含一个位于封面图像之上的绝对定位图像。我想做的是将该图像仅定位到容器的右侧。

这是我的代码:

<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 添加到标题图标时，它会在容器外对齐。当然，我可以创建媒体查询并尝试根据屏幕大小定位图标，但我想知道是否存在更好的方法。

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

Answer 1

我不是 100% 确定您要实现的目标，但听起来您想要 right: 0将图像对齐到 container 的右侧而不是 header .

position: absolute将根据未静态定位的第一个父元素绝对定位元素。现在，你有 #header有相对位置，但是 .container仍然有静止的位置。因此，您想申请 position: relative到容器:

#header .container {
  position: relative;
}

此外，您发布的代码似乎缺少一个 </div> .