...

View Full Version : Is it risky positioning all of my elements using position: absolute?



shedokan
07-04-2010, 12:36 PM
Hi,
I am working on a web app(a web desktop or webOS), and after a lot of thinking I believe that positioning all of the elements, which can get to thousends, using position absolute, and using one class on thousends of elements.
So I was wondering how much impact does this have on the rendering of my web app, will it make it slower? or maybe even faster?

Thanks.

effpeetee
07-04-2010, 01:37 PM
Check this here. (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/)

Also much help here. (http://www.exitfegs.co.uk/Sources.html) Use the search facility Single words often work best.

Frank

Excavator
07-04-2010, 05:20 PM
Hello shedokan,
Is ap really needed? It's usually better to just let the document flow naturally, ap has it's uses but it can also be over-used.

Have a look at the pitfalls of absolute positioning (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/) link that effpeetee suggested.

jhaycutexp
07-05-2010, 12:35 AM
definitely.. .as much as possible.. no ap's on your style :)

shedokan
07-05-2010, 12:15 PM
I have no problem with the consequences of absolute positioning, I know everything absolute does and why I can't use margins.
My app is taking the full browser's width and height and has no scroll bar(except when the browser size is too small) so I have to use absolute for a lot of parts.

What I was wondering was that if I would use too much absolute positioning the rendering of my app would slow down.

None of those articles has mentioned anything something about the browser rendering, they are mostly about web pages and why it isn't good in them, but my app is not like a website or a content page.

Here is an old version of my app, which is not using absolute positioning for everything: http://shedokan.110mb.com/os/preview/

Thanks.

Kor
07-05-2010, 12:21 PM
In my opinion you should not use position absolute unless you must do that by all means. Which would be that special reason for using absolute positioning?

shedokan
07-06-2010, 12:21 PM
In my opinion you should not use position absolute unless you must do that by all means. Which would be that special reason for using absolute positioning?

I must use it because I have many dymanic widths like elements that specify content and when the parent element is resized they resize with it, I found that resizing it's width and height everytime the parent element is a lot slower than letting the the browser automatically determine it's size using absolute positioning.

SO if I want a textbox to be the same width as it's parent but only have a margin of 5px on every side I can just set the right and left style values to 5px.

Why do you think people should not use absolute positioning unless they must? because it's bad css design or because something else?

abduraooft
07-06-2010, 12:45 PM
I found that resizing it's width and height everytime the parent element is a lot slower than letting the the browser automatically determine it's size using absolute positioning.
Setting a position and setting a dimension are entirely different. It'd be easy to discuss, if you share some code at end which used a lot of absolute positions and which is "great" according to you.

PS: Have you checked the link given by Frank at least once?

Kor
07-06-2010, 02:44 PM
For me... the only case I use absolute position is when I create some JavaScript rollover menus or slide shows. In those cases I need some absolute positioned elements inside an explicit relative positioned container. Otherwise, I do not use explicit positioning at all. There is no need.

shedokan
07-10-2010, 11:53 AM
Setting a position and setting a dimension are entirely different. It'd be easy to discuss, if you share some code at end which used a lot of absolute positions and which is "great" according to you.

PS: Have you checked the link given by Frank at least once?

For example I have a div which I want to be full browser size, so I set:
top: 0px
left: 0px
right: 0px
bottom:0px

that way I don't need to do:
body.onresize = function(){
div.width = body.width;
div.height = body.height;
};

Which will work very slow, so instead I use css which relys on the rendering engine and not on the JS engine through the rendering engine.

(The example above won't really work in JS it's just an example of the idea)

PS: I have checked out all the links and all the relevant links in them, but couldn't find anything I need.

abduraooft
07-10-2010, 12:11 PM
If there's only one such div, then you could set 100% min-height to that div. See http://www.xs4all.nl/~peterned/examples/csslayout1.html

VIPStephan
07-10-2010, 12:13 PM
Well, I suppose absolute positioning set with CSS is definitely not as slow as doing a dynamic resize with JS. However, you probably don’t need AP on every element inside an AP container or whatever. And also you should look into alternatives to assigning a class to many elements as far as styling goes. Make use of sibling and descendant selectors and first-child pseudo class etc., that saves a lot of code (I suppose you’re not supporting IE 6 since your approach of positioning opposite sides of an element wouldn’t work there anyway).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum