HTML - single page layout - absolute positioning I am doing web apps, mostly single page apps. So i have to give absolute and fixed positioning a lot via css. 

For Example, consider this page layout:

&lt;html&gt;
&lt;div class="app-header"&gt;
&lt;/div&gt;
&lt;div class="main-app-area"&gt; &lt;!-- app contains four pages --&gt;
      &lt;div class="app-page" style="visibility: visible"&gt;&lt;/div&gt;
      &lt;div class="app-page"&gt;&lt;/div&gt;
      &lt;div class="app-page"&gt;&lt;/div&gt;
      &lt;div class="app-page"&gt;&lt;/div&gt;
      &lt;div class="app-page"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/html&gt;


CSS

.app-header
{
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
}

.main-app-area
{
   width: 100%;
   height: 100%;
}

.app-page
{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  visibility: hidden;
}


I really don't know, Is this right way of doing single page apps? Will it cause any performance problems?
Have a look at this, maybe this helps a little. I made only little changes. first of all you have to know a child element is always positioned absolute or relative to his parent. so it is important to make child and parent elements, except you want a div as a placeholder to load the data in another way...

play arround with the code (like why is position:absolute 5px top and left only 5px from the orange...) it may helps to understand. also have a look at the class .app-page.active !

&lt;style type="text/css"&gt;
.app-header
{
    background-color:green;
    position: fixed;
    top: 10px;
    left: 10px;
    width: 100%;

}
.main-app-area
{
    background-color:orange;
    width: 100%;
    height: 100%;
    position:relative;
    top:20px;
    left:20px;
}

.app-page
{
    background-color:fuchsia;
    opacity:0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 5px;
    left: 5px;
    visibility: hidden;

}
.app-page.active {
    visibility:visible;
}
&lt;/style&gt;

&lt;div class="app-header"&gt;xxx
    &lt;div class="main-app-area"&gt; &lt;!-- app contains four pages --&gt;
        yyy
        &lt;div class="app-page active"&gt;zzz&lt;/div&gt;
        &lt;div class="app-page"&gt;&lt;/div&gt;
        &lt;div class="app-page"&gt;&lt;/div&gt;
        &lt;div class="app-page"&gt;&lt;/div&gt;
        &lt;div class="app-page"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;