如何定位像这样的图像？

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