Question

我有一个全宽封面图片。在其中，我有一个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;
 }
}

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

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

Answer 1

我不是100％确定您要实现的目标，但听起来您希望right: 0将图片与container的右边对齐，而不是header

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

#header .container {
  position: relative;
}

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

Answer 2

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

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

绝对元素在bootstrap容器中的位置

2 个答案: