CSS 定位：如何制作 2 个重叠的 div，然后在重叠 div 的右侧再制作 1 个 div

Question

我如何定位 2 个重叠的 div 加上第三个 div 就在这些重叠 div 的右侧（但第三个没有一直向右浮动）？

<div id=one>I overlap id=two.</div>

<div id=two>I overlap id=one.</div>

<div id=three>I am just to the right of one and two.</div> 

想要的布局是：

|一重叠二 |三 |

http://i.imgur.com/4CMNaUh.png

我知道我可以使用 position:relative 的包装 div 重叠前 2 个 div，并将 div 一个和两个设置为 position:absolute

<div id="wrapper">

    <div id=one>I overlap id=two.</div>

    <div id=two>I overlap id=one.</div>

</div>

#wrapper{position:relative;}
#one,#two{position:absolute;}

但是我怎样才能让 div id=three 在重叠 div 1 和 2 的右侧？

到目前为止我得到了什么：http://jsfiddle.net/justAsking/cXrBA/

Answer 1

解决办法如下：

http://jsfiddle.net/cXrBA/2/

HTML

<div class="wrapper">

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

</div>

CSS

.wrapper {
    padding-left: 100px;
    width: 100px;
    height: 100px;
    position: relative;
}
.one , .two {
    width: 100px;
    position: absolute;
    left: 0;
}
.one {
    background-color: blue;
    height: 50px;
    top: 0;
    z-index: 1;
}
.two {
    background-color: red;
    height: 100px;
    top: 0;
}
.three {
    background-color: green;
    width: 100px;
    height: 100px;
}

Answer 2

给第二个 div 一个负边距-left;

http://jsfiddle.net/HXH76/

div {
    display: inline-block;
}

#one {
    background: hsla(0,100%, 50%, 0.50);
}

#two {
    background: hsla(90,100%, 50%, 0.50);
    margin-left: -40px;    
}

#three {
    background: hsla(180,100%, 50%, 0.50);
}