One of the SEO principals that really seems to make sense to me, is having the most important content on the page as close to the top of the HTML markup as possible. Take a look at the web layout below. Common sense would have us order our markup logically as such:
What this screenshot doesn’t show, is that the menu is actually dropdown navigation. It is a series of nested unordered lists. The navigation code is actually 142 lines of code! That is an awful lot of “content” before a search bot would see the important stuff we want it to see. What would be ideal, is to get our source code in the order of importance of the content. Like so:
That’s easier said than done. We’ll have to resort to some CSS trickery to make it happen. Namely, absolute and relative positioning. It all starts with the header. We’ll put the h1 serving as the page title in a wrapping div with relative positioning. Then we’ll absolutely position the h1 tag inside it, with bottom and left values. That means that if it grows, it will grow upward not downward. We’ll also give the header excessive bottom padding. This bottom padding will be equal in height to the expected height of our navigation bar. This ensures that there will be space after the page title and before the rest of the content. Then we give the page-wrap itself relative positioning, and move the navigation code all the way down to just before closing </div> tag. Then we can absolutely position the nav with top and left values to get it to show up in that gap we created in between. Ta da! We now have source code that begins like this: The important stuff is right up top. For accessibility, we should include a link like this right in the header: The “hide” class does exactly that, but doesn’t use display: none, which is actually inaccessible. Now the first thing read in a screen reader is a “jump to nav” link, which may be useful. 
<body>
<div id="page-wrap">
<div id="header">
<h1 id="mainPageTitle">Content is King</h1>
</div>
<div id="main-content">
<h2>This Paragraph Appears Above Nav in HTML</h2>
<p>Pellentesque habitant morbi tristique senectu.....<a class="hide" href="#nav">Jump to Navigation</a>.hide {
position: absolute;
left: -9999px;
top: -9999px;
}
Resource:http://css-tricks.com
