Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

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:

<html>
<div class="app-header">
</div>
<div class="main-app-area"> <!-- app contains four pages -->
      <div class="app-page" style="visibility: visible"></div>
      <div class="app-page"></div>
      <div class="app-page"></div>
      <div class="app-page"></div>
      <div class="app-page"></div>
</div>
</html>

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?

share|improve this question
add comment

1 Answer

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 !

<style type="text/css">
.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;
}
</style>

<div class="app-header">xxx
    <div class="main-app-area"> <!-- app contains four pages -->
        yyy
        <div class="app-page active">zzz</div>
        <div class="app-page"></div>
        <div class="app-page"></div>
        <div class="app-page"></div>
        <div class="app-page"></div>
    </div>
</div>
share|improve this answer
    
Hi !!! My question is, excessive use of absolute and fixed positioning cause to any performance and layout delay? –  user10 Feb 27 '13 at 3:58
1  
No, not at all. Most layout delays or kind of jumping boxes happen if positions aren't "made", then the content gets loaded, needs more space and pushes the box somewhere else. –  caramba Feb 27 '13 at 7:58
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.