ブートストラップコンテナ内の絶対的な要素の位置

Question

私は全幅のカバーイメージを持っています。その中には、カバー画像の上に置かれた絶対配置された画像を持つブートストラップコンテナクラスがあります。私がしたいのは、その画像をコンテナの右側だけに配置することです。それは、容器の外に整列、ヘッダー、アイコンに0：もちろん

<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; 
} 
} 

は私が右の追加：

は、ここに私のコードです。私はもちろん、メディアのクエリを作成し、画面サイズに基づいてアイコンを配置しようとすることができますが、それを行うためのよりよい方法が存在するかどうかは疑問です。

私はまた、コンテナに相対的なアイコンを作ろうとしましたが、これは私が達成しようとしているものを破るようです。

Answer 1

は、これは私が

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

を追加したコードで、あなたが jsfiddle探しているものを、このです

Answer 2

私はあなたが達成しようとしているものを100％わからないんだけど、あなたはright: 0がcontainerなくheaderの右側に画像を整列するように聞こえます。

position: absoluteは、静的に配置されていない最初の親要素に従って要素を絶対的に配置します。現時点では、#headerに相対位置がありますが、.containerには静的な位置があります。そのため、あなたはコンテナにposition: relativeを適用する：

#header .container { 
    position: relative; 
} 

また、あなたが投稿したコードは、</div>を欠けているように見えます。