绝对元素在自举容器内的位置

Question

我有一个完整宽度的封面图片。里面有一个引导容器类，它有一个绝对定位的图像，位于封面图片的顶部。我想要做的是将图像定位在容器的右侧。

这里是我的代码：

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

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

当然，当我添加的权利：0至头图标，它对准容器外。我当然可以创建媒体查询，并尝试根据屏幕大小定位图标，但是我想知道是否存在更好的方法。

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

Answer 1

这是你在找什么jsfiddle，这是我加入

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

代码

Answer 2

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

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

#header .container { 
    position: relative; 
} 

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