\$\begingroup\$
\$\endgroup\$
0
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?
1 Answer 1
\$\begingroup\$
\$\endgroup\$
2
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>
-
\$\begingroup\$ Hi !!! My question is, excessive use of absolute and fixed positioning cause to any performance and layout delay? \$\endgroup\$Sathya– Sathya2013年02月27日 03:58:28 +00:00Commented Feb 27, 2013 at 3:58
-
1\$\begingroup\$ 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. \$\endgroup\$caramba– caramba2013年02月27日 07:58:17 +00:00Commented Feb 27, 2013 at 7:58
lang-css