如何使用CSS將元素放在另一個元素的頂部（不使用絕對位置）？

Question

是否有可能從這一去：

<h1>Logo</h1> 

<ul>Menu</ul> 

這樣：

<ul>Menu</ul> 

<h1>Logo</h1> 

與CSS和不使用絕對或相對位置？

Answer 1

您可以在一個包含div中包圍這兩個塊，然後將該徽標浮動到任一側並給它一個「clear：both」，這應該將其推到菜單下方。

<div> 
    <div>Logo</div> 
    <div>Menu</div> 
</div> 

到

<div> 
    <div style="float: right; clear: both">Logo</div> 
    <div>Menu</div> 
</div> 

Answer 2

我會採取的方法是使用負利潤率：

<style> 
    h1 { margin-top: 100px; } 
    ul { margin-top: -100px; } 
</style> 

這使得標記保持不變，同時允許元素出現在不同的訂購。

使用上述CSS，你可以從這個HTML去：

​​

對此僅僅使用CSS更多：

<ul>...</ul> 
<h1>Logo</h1> 

所有的同時不使用position: absolute或position: relative 。