Using Relative Positioning For Consistent Layout - Relative Positioning Explained

(Page 2 of 4 )

To explain it simply: each block-level element on a web page takes up a chunk of space. That chunk of space receives a default location in the flow of the page at runtime, as it is loaded in order with other elements. By defining the element’s position as relative (through CSS) and modifying the respective properties, you move the element from where it should be located. This will also have an effect on all other relatively positioned elements.

Here’s an example:

<div style="width: 100px; height: 100px; background-color: #CCC; position: relative; top: 15px; left: 15px; ">relativity is great, this is no theory!</div>

So this div (layer) has been moved 15 pixels away from its default top and left position. This means it will move 15 pixels down and 15 pixels to the right. If this moves the element into the default position or space of another element, one of two things will happen:

1. If the other element’s position is absolute or undefined, you will get overlap. This usually isn’t pretty. You may want to achieve this effect sometime with alpha-indexed PNGs, but you’ll still want to control the overlap by defining the relative positioning of each element, instead of leaving it up to the browser’s rendering judgment.
   
   
2. If the other element’s position is also relative, the other element will also move, relative to the position of the first. This is the way we can achieve a very fluid, consistent layout, and the methodology discussed in this article.

Next: A Basic Web Page >>
 

More Style Sheets Articles
More By Justin Cook

Comments On: Using Relative Positioning For Consistent Layout

· I appreciate what you tried to achieve here, but if you want to write this kind of...    · I too appreciate what you've tried to achieve, that is shameless self...    · [quote]I too appreciate what you've tried to achieve, that is shameless self...    · If you really are a writer here, I'm quite surprised that you would post these...    · I think there's another way of design web pages that use absolute positioning (thus...    · Absolute positioning means absolute to the page. I don't believe that method would...    · Great explanation of CSS relative positioning. You isolate the problem at hand and...    · "But it's downright frustrating to realize that the positioning you've chosen...    · Clear and simple, they way few in the industry can keep things.You saved my...    · I'm not sure what this author was trying to achieve. This is not a flexible layout,...   >>> Post your comment now!