html - CSS 定位 : How to make 2 overlapping divs and then 1 more div to the right of the overlapping divs

Question

如何将两个重叠的 div 加上第三个 div 放在那些重叠的 div 的右侧(但第三个 div 没有一直 float )？

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