作爲響應重新縮放並用反應性元件

Question

實施例位置圖像最好地描述的問題：

我有一個圖像，讓稱之爲背景（藍色的示例中）。在這個例子中的圖像是

• 2000像素寬/ 1000像素高
• 具有width: 100%組，並且將與瀏覽器窗口重新縮放。

我也有另外一個形象，我們稱之爲綠色。這是一個正方形是

• 200像素X 200像素（寬度是背景的大小的10％）。

我想實現的是，我想綠色重新調整，並相應地重新定位，並完全覆蓋背景的粉色目標位置，而不管當前視口的寬度（換句話說：它應該是「響應」）。

縮放部分很容易，因爲它只是將寬度設置爲10％。定位是一個難以割裂的堅果。以下代碼就我所知。由於我使用的是position: absolute，我將其中的元素從自然流程中移除，top: 40%將爲40% of 0，綠色廣場將保留在頂部。

相同的示例代碼可作爲CodePen，以簡化編輯：http://codepen.io/emiloberg/pen/vGdNaX?editors=1100#

這是根本不可能用純CSS？如果不是，則可能的解決方法是使用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%; 
}