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

Question

如何将两个重叠的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

我知道我可以使用包装器div position:relative重叠前2个div并设置div和1两个到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 = 3放在重叠div的右侧？ 2？

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

Answer 1

给第二个div留下一个负余量 -

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

Answer 2

解决方案如下：

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