これに応じ最良の質問を記述するために応答素子上

Question

例を再スケールと位置画像：

私はイメージを持って、背景（例では青）、それを呼び出すことができます。この例では、画像

• 2000pxワイド/ 1000px高
• はwidth: 100%セットを有している、ブラウザウィンドウで再スケーリングします。

私はまた別の画像を持っている、のはそれグリーンを呼びましょう。それは

• 200pxのX 200pxのあるスクエアの（幅背景のサイズの10％です）。

は何を達成したいことは、私は、他の言葉で（緑が再スケールし、それに応じて再配置し、完全にかかわらず、現在のビューポートの幅の、背景のピンクの目標位置をカバーしたいということですそれは "反応的"でなければならない）。

リスケール部分は、幅を10％に設定するだけで簡単です。位置決めは割れにくい硬いナットです。次のコードは私が得る限りです。私はposition: absoluteを使用していますので、自然な流れから要素を取り除きます。top: 40%は40% of 0になり、緑色の四角形は一番上にとどまります。 http://codepen.io/emiloberg/pen/vGdNaX?editors=1100#

が、これは純粋なCSSで簡単にできません：

同一のコード例では、簡単に編集するためCodePenとして利用できるのですか？そうでない場合は、svgのimage要素を使用することが考えられます。

.wrapper { 
 
    position: relative; 
 
} 
 

 
.bg { 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 

 
.green { 
 
    position: absolute; 
 
    width: 10%; 
 
    left: 60%; 
 
    top: 40%; /* This isn't working */ 
 
}

<div class="wrapper"> 
 
    <img class="bg" src="https://dl.dropboxusercontent.com/u/3378286/solayout/bg.png"> 
 
    <img class="green" src="https://dl.dropboxusercontent.com/u/3378286/solayout/green.png"> 
 
</div>

（。私は苦労この質問に適したタイトルを探していたそれを編集すること自由に感じ）

Answer 1

説明：http://www.w3schools.com/css/css_positioning.asp

CSS：

.bg { 
    position: relative; 
    width: 100%; 
}