CODEWITHSUNDEEP
htmlcsspositioning
Tom
Tom

Reputation: 927

Display one element above another

Semantically it makes sense in the document to be written like this, I also imagine it better for SEO.

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

However, I want the 'main' section to be above the 'header' on screen.

Is there a way to do this using pure CSS?

Upvotes: 0

Views: 1549

Answers (1)

Joseph Marikle
Joseph Marikle

Reputation: 78520

One way is with a container and some absolute positioning.

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>

Upvotes: 2

Related Questions