Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Oct 2007
    Posts
    277
    Thanks
    2
    Thanked 4 Times in 4 Posts

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

    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.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Check this here.

    Also much help here. Use the search facility Single words often work best.

    Frank
    Last edited by effpeetee; 07-04-2010 at 12:46 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 link that effpeetee suggested.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    definitely.. .as much as possible.. no ap's on your style

  • #5
    Regular Coder
    Join Date
    Oct 2007
    Posts
    277
    Thanks
    2
    Thanked 4 Times in 4 Posts
    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.

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Regular Coder
    Join Date
    Oct 2007
    Posts
    277
    Thanks
    2
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by Kor View Post
    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?

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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?
    Last edited by abduraooft; 07-06-2010 at 11:51 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #10
    Regular Coder
    Join Date
    Oct 2007
    Posts
    277
    Thanks
    2
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by abduraooft View Post
    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.

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,698
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    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).


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •