Question

你看到下面的示例代码，我想在demo中做的事情是; 我希望通过在css和secondbar类中进行一些更改来获得第二个栏，而无需更改html或使用javascript。此外，当发生这种情况时，第一个栏应向下滚动（位置：绝对）。我怎么能这样做？

<div class="wrap">
  <div class="firstbar"></div>   
  <div class="secondbar">Hi there!</div>
</div>

 .wrap{
    width:100%;
    border:1px solid black;
 }

 .firstbar{
    background:gray;
    height: 70px;
    width:100%;  
  }

  .secondbar{
    font-size:24px;
    color:orange;
    background:yellow;
    width:100%;
  }

http://jsfiddle.net/z14mhoq4/

Answer 1

是的，非常有可能：

margin-top:-70px;

将以上行添加到第二个栏。

我承认我的出路是厚颜无耻的。但另一种方式是使用Nico O建议的order。但是，由于您的问题指明您只想在一个地方进行更改，我的答案就足够了

更新了小提琴：http://jsfiddle.net/z14mhoq4/2/

Answer 2

如果我正确理解了您的问题，您可以使用flexbox进行排序，并order property。

以下是您更改的示例：

.wrap {
    border:1px solid black;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.firstbar {
    background:gray;
    height: 70px;
    flex: 1 0 100%;
    order: 2;
}
.secondbar {
    font-size:24px;
    color:orange;
    background:yellow;
    flex: 1 0 100%;
    order: 1;
}

演示http://jsfiddle.net/z14mhoq4/1/

Answer 3

这里有demo css3效果，可以使用absolute位置设置位置动画。

使用纯CSS在Div1上方定位Div2

3 个答案: