gautamshaw Posted September 29, 2009 Share Posted September 29, 2009 I am having some problems with the absolute positioning concept......Can someone give me an example by which i can clear the concept of absolute positioning?Thanks in advance Link to comment Share on other sites More sharing options...
chibineku Posted September 29, 2009 Share Posted September 29, 2009 There are three types of position:Relative positioning means that an object is part of the document flow: if there are 40 lines of text before it, then it will come after them. Its position is determined in part by surrounding elements.Fixed position elements are always in the same place on the page, even if you scroll.Absolutely positioned elements are removed from the document flow and will overlap other elements if their positions conflict. An absolutely positioned element that is given, say, top 20px and left 20px will move to 20px from the top and left of the page, regardless of other elements being in the way. If you don't define these sizes, it will act mostly like a relatively positioned element. Link to comment Share on other sites More sharing options...
gautamshaw Posted September 29, 2009 Author Share Posted September 29, 2009 can you tell what does the term document flow means? Link to comment Share on other sites More sharing options...
chibineku Posted September 29, 2009 Share Posted September 29, 2009 I tried to explain it briefly. Basically elements appear in the order that they come in the source code, and are positioned depending on whether they are inline or block level elements. So, a div, followed by a paragraph, followed by two images and a final paragraph, will display asdiv - full widthparagraph - full widthimg - imgparagragh - full widthThat's because divs and paragraphs are block level, while images are inline. But if you give one of the images position: absolute and top:0, it will appear at the very top of the page, sitting over the first div, because it doesn't take its position from the other elements anymore - it has been taken out of the normal flow. Link to comment Share on other sites More sharing options...
jeffman Posted September 29, 2009 Share Posted September 29, 2009 Being out of the flow also means that other page elements will ignore it when they position themselves. Nothing, including text, will wrap around an absolutely positioned element. That's what chibeneku means when he says that elements will overlap unless you position them so they don't.FWIW, absolute positioning can be a blessing when it's needed, but if used carelessly, it can cause A LOT of problems. My biggest need for it is pulldown menus and pseudo-dialogs. For ordinary layout, stick with float, clear, margins, padding, inline behavior (side-by-side), and block-level behavior (moves down a level). Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.