How to place an element in top of another using CSS (without using absolute position)?

Is it possible to go from this:

 <h1>Logo</h1>

 <ul>Menu</ul>

to this:

 <ul>Menu</ul>

 <h1>Logo</h1>

with CSS and without using absolute or re开发者_如何转开发lative position?

You could surround both of those blocks in a containing div, then float the logo to either side and give it a "clear: both", which should push it below the menu.

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

to

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

The approach I would take is to use negative margins:

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

This allows the markup to stay the same while allowing the elements to appear in a different order.

With the above CSS, you can go from this HTML:

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

To this using nothing more than CSS:

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

All the while without using position: absolute or position: relative.