CSS Positioning

Normal Flow

In an html document, each element is viewed by the browser as a block of information. There are inline level elements like <em> and <span> that do not cause a line break. Then there are block level elements like <p> and <div>, elements that default to 100% available screen width and do cause a line break. The browser sees each block level element as a separate box, and stacks all of these boxes one on top of the other in the order that they are found in the document.

Positioning has to do with changing an object’s relationship to the normal flow. There are 4 different positioning schemes in CSS: static, absolute, relative and fixed.

Static Positioning

This is actually the default setting, wherein the element flows along in the normal way. This is not used that much except to reset an object’s positioning if it should inherit that attribute from its parent.

Absolute Positioning

When you absolutely position an element, you literally tell it where to go in relation to its container object down to the pixel. Absolutely positioned elements use the last positioned parent as its frame of reference. That is why we assign a position to wrapper divs: if we did not, the divs inside of it would use the html element as their reference.

When you absolutely position an element, you take it out of the normal flow. That element no longer has any effect on its siblings.

Relative Positioning

Relative positioning is not used very much–it is mainly used to assign a position to container divs in order to qualify them to be the frames of reference for any positioned elements within them.

When you use relative positioning on an element, it is NOT taken out of the normal flow even if you reposition it. That means the space it normally would take up does not change and all the sibling elements flow around the space as usual.

Fixed Positioning

This type pulls the element out of the normal flow. A fixed position element uses the browser as its reference so no matter how big or small the window gets, the element stays in its assigned position.

Z Index

If you want your divs to overlap, use the Z Index attribute. If you want one object to sit on top of the others, assign it z-index: 1. SInce the default is zero, that object will sit on top. If you want something to sit on top of that object, use z-index:2. The higher the index, the closer the div will be to the front of the page.

Floats

The last way to work with objects is to assign the float property to them. This is not a positioning scheme–it just changes the object’s behavior slightly. If you say float: left, the element aligns to the left. If you say float: right, it aligns to the right. The object stays within the normal flow. To create a columned layout, just float several dics to the same side. They will snap together in a horizontal line as long as they can fit the container block.


Articles I used to write this lesson:

Integrated Web Design: Position This! CSS Positioning Demystified
|  By Molly E. Holzschlag  |  Aug 6, 2004

CSS Layout |  by Ross Shannon

CSS Positioning |  by Mike Hall

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s