Отобразить один элемент над другим

Question

Семантически имеет смысл, чтобы документ был написан следующим образом, я также представляю его лучше для SEO.

<div id="header"></div>
<div id="main"></div>

Однако я хочу, чтобы раздел 'main' был над заголовкомscreen.

Есть ли способ сделать это с помощью чистого CSS?

Answer 1

Один способ - с контейнером и абсолютным позиционированием.

http://jsfiddle.net/QpPh4/

.container
{
    position:relative;
}

#main
{
    position:absolute;
    bottom:100%;
}

<br><br>
<div class="container">
   <div id="header">Hi I'm a header</div>
   <div id="main">Hi I'm the content</div>
</div>