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

Answer 2

这些都不适合我，但对Saeed的一些调整似乎 - 基本上复制了第二个div并仅用于布局，即

HTML

<div class="wrap">
<div style="position:relative;" class="two">
    <strong>This should be first..</strong>  
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor diam eget lorem vehicula aliquam. Aliquam ac tellus eget justo facilisis malesuada. Curabitur mi sapien.</p>        
</div>
<div class="one">
    <strong>This should not be first..</strong>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </p>
</div>
<div class="two">
    <strong>This should be first..</strong>  
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor diam eget lorem vehicula aliquam. Aliquam ac tellus eget justo facilisis malesuada. Curabitur mi sapien.</p>        
</div>
<div class="three">
    <strong>This can be 2nd or third.</strong>
       <p> Aliquam ac tellus eget justo facilisis malesuada. Curabitur mi sapien, bibendum sed eleifend non, pretium eget arcu. Vivamus et augue nec quam rutrum tempor in in urna. </p>
</div>
</div>

位置：相对意味着其他元素将被这个元素向下移动（无论如何它都会出现在向上/向前移动的DIV之前）。

CSS：

.one, .three{
width: 100%;
margin-bottom: 10px;
background: yellow;     
float:right;
}
.two{    
position: absolute;
top: 0;
background: green;
left:0;
width:100%;
margin-bottom:10px;
}

我意识到你说HTML无法改变如此迂腐 - 说这不是你问题的答案，但在我的情况下，我无法改变HTML结构的原因是因为我想要一个默认的移动布局在@media is screen and (min-width: 700px;)时重新订购。我可以让虚拟div消失（z-index或其他），除非我需要它来重新组织布局（不依赖于JS）。

http://jsfiddle.net/UK6vK/83/

使用CSS更改div顺序

2 个答案: