如何使用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：

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

仅使用CSS：

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

一直 ，不使用 position: absolute或position: relative。