Jump to content

Absolute Positioning


gautamshaw

Recommended Posts

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

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...