浮動底部和向上

我想通過使用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

浮動底部和向上

回答

相關問題