html - 使用 CSS 更改 div 顺序

Question

我遵循无法更改的 HTML 结构。它包含三个垂直 div。我只想使用 CSS 更改 div 的位置，以便第二个 div 出现在最顶部，第一个和第三个 div 出现在此之后(唯一重要的是第二个 div 应该出现在顶部)。

我正在尝试使用以下 CSS 代码，它在顶部显示第二个 div，但隐藏了第一个 div。之后如何显示其他两个 div？所有三个 div 都有不同的高度。

HTML:

<div class="wrap">
    <div class="one">
       This should be third.
    </div>
    <div class="two">
       This should be first.     
    </div>
    <div class="three">
       This should be second.
    </div>
</div>

CSS:

.wrap{
    width: 100px;
    overflow: hidden;
    position: relative;
}


.one, .two, .three{
    width: 100px;
    margin-bottom: 10px;
    background: yellow;     

}

.two{    
    position: absolute;
    top: 0;
    background: green;
}

JSFiddle: http://jsfiddle.net/UK6vK/

Answer 1

您将此样式代码用于 .one 和 .three

.one, .three{
width: 100px;
margin-bottom: 10px;
background: yellow;     
float:right;
}

并为 .two 设置这种样式

.two{    
position: absolute;
top: 0;
background: green;
left:0;
width:100%;
}