html - 在另一个元素之上显示一个元素

Question

在文档中这样写在语义上是有意义的，我也认为它对 SEO 更好。

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

但是，我希望“主要”部分位于屏幕上“标题”的上方。

有没有办法使用纯 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>