如何定位像這樣的圖像？

Question

我怎樣才能在例中的位置相似圖片下面

我已經嘗試不同的東西，但我不能達到的結果，我需要。

預先感謝您。

Answer 1

您可以使用單個div並通過box-shadow屬性創建外部圓圈（因爲它們內部沒有內容），例如，

http://codepen.io/anon/pen/zxjjXW

標記

<div></div> 

CSS

* { 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

div { 
    border-radius: 50%; 
    width: 170px; 
    height: 170px; 
    border: 85px green solid; 
    box-shadow: -100px -100px 0 brown, 
       100px -100px 0 lightgray, 
       -100px 100px 0 red, 
       100px 100px 0 blue; 
} 

---

最終結果

Answer 2

我會使用CSS類與位置屬性。

W3schools.com： http://www.w3schools.com/css/css_positioning.asp

例子：

img { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: -1; 
}