CSS Positioning – Some pointers


1. Absolute Absolute positioning is absolute in relation to the parent element. In this case the parent element is the whole document, so the div is positioned absolutley at 0,0 and will apear in the top left corner.

2. Relative This positions the element relative to where it would have been in the document. Useful for moving something down or across a few pixels for example. In the diagram, the black dashed outline shows where the div would have been without positioning.

3. Relative and Absolute An example of absolute and relative positioning. The outer green box is positioned relative to where it would have been, whilst the inner box is positioned absolutely in relation to the parent green box.

4. float This is where the element in question “hovers” left or right, much like aligning an image left or right works in plain HTML.

6. 3 Column layout Here’s where it gets fun. Below is a classic 3 column layout with the left and right DIV floated correspondingly left and right, and the middle DIV without any positioning at all.

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