浮动底部和向上

我想通过使用CSS从上面的代码从上面的代码进一步向下的代码。浮动底部和向上

基本上我的HTML是这样的：

<div class="showbelow"> 
show below 
</div> 

<div class="showabove"> 
show above 
</div>

我想要的showabove div来显示showbelow DIV以上，尽管在HTML低于它。有没有办法做到这一点而不使用负边界在CSS？例如。给上方一个负的顶部边界，并显示正的顶部边界下方？两个div都是容器的100％。

感谢提前:)

来源

2016-07-27 Bethfiander

有一个属性order放置使用Flexbox的一个特定的地方项目。

参见下面的示例：

.container { 
 
    display:flex; 
 
    flex-direction:column; 
 
} 
 
.container div { 
 
    border:1px solid red; 
 
} 
 
.showabove { 
 
    order:1; 
 
} 
 
.showbelow { 
 
    order:2; 
 
}

<div class="container"> 
 
    <div class="showbelow">show below</div> 
 
    <div class="showabove">show above</div> 
 
</div>

的Flex项，默认情况下，显示并以相同的顺序排列，因为它们出现在源文件英寸订单属性可用于更改此订单。
https://drafts.csswg.org/css-flexbox-1/#order-property

小心使用order:-1！

.container { 
 
    display:flex; 
 
    flex-direction:column; 
 
} 
 
.container div { 
 
    border:1px solid red; 
 
} 
 
.showabove { 
 
    order:-1; 
 
}

<div class="container"> 
 
    <div class="showbelow">show below</div> 
 
    <div class="showmiddle">show middle</div> 
 
    <div class="showabove">show above</div> 
 
</div>

说明：的order:-1设置的项目的容器的第一位置，因为所有其他项目每默认order:0了。它不会移动前一个项目之前的项目！在你的情况下，这个解决方案正在工作，但如果你添加更多的项目，这可能是一个问题，你必须为容器上的每个项目设置order，就像上面的例子。

来源

2016-07-27 20:35:32

太棒了！非常感谢 - 只是出于兴趣，你知道什么命令机器人会看到内容？ – Bethfiander

我认为这个链接可以帮助你：http://sprungmarker.de/wp-content/uploads/css-a11y-group/css-a11y-flexbox.html。对于搜索引擎，我不能说它是怎么样的，但我认为搜索引擎会在showabove之前得到网站流：'showbelow'。 –

随着Flexbox您可以更改元素的顺序。所以在这种情况下，您可以在.showabove div上使用order: -1。

body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.showabove { 
 
    order: -1; 
 
}

<div class="showbelow">show below</div> 
 
<div class="showabove">show above</div>

来源

2016-07-27 20:35:02

浮动底部和向上

回答

相关问题