CSS Positioning, Layout and Understanding CSS z-index

Layout with CSS is a great way to manage Objects and elements in a web page and a very easy. I think css is better than the tabural stracure. In a CSS styles you need to look at each part of the page as an individual chunk that you can shove wherever you choose. You can place these chunks absolutely or relative to another chunk using CSS. One of the major benefits of using CSS is that you’re no longer forced to lay your sites out in tables.

The position property is used to define whether an element is absolute, relative, static or fixed. This is the fun part. Using CSS you can define the position for your id’ed divs. Store your position information in a style call like this:

For Example

#banner {

position:static

The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.

Normally you wouldn’t specify this unless you needed to override a positioning that had been previously set.

#divname{
   position:static;
 }

position:relative

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

#divname {
 position:relative;
 top:20px;
 left:-40px;
 }

position:absolute

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

#divname {
   position:absolute;
   top:0;
   right:0;
   width:200px;
 }

position:relative + position:absolute

If we set relative positioning on first div, any elements within first div will be positioned relative to first div. Then if we set absolute positioning on second, we can move it to the top right of first div:

   #firstdiv {
   position:relative;
   }
   #seconddiv {
   position:absolute;
   top:0;
   right:0;
   width:200px;
   }

Floating an element will shift it to the right or left of a line, with surrounding content flowing around it. For variable height columns, absolute positioning does not work, so let’s come up with another solution.

We can “float” an element to push it as far as possible to the right or to the left, and allow text to wrap around it.

#divname {
 float:left;
 width:200px;
 }

Then after the floating elements we can “clear” the floats to push down the rest of the content.

#divclear{
 clear:both;
 }

What is z-index

When you’re using CSS positioning to position elements on the page, you need to think in virtual 3-D. Each element on the page can be layered on top or beneath any other element. The z-index determines where in the stack each element is. I like to think of the elements as pieces of paper, and the Web page is a collage. Where I lay the paper is determined by positioning, and how much of it shows through the other elements is the z-index.

img
   {
   position:absolute;
   left:0px;
   top:0px;
   z-index:-1;//Set behind of any element while the z-index is -1.
 }

On short note z-index is used to stack order of an element.

See Also Following Topics:

• CSS 3 Column Fixed width centered layout Tutorial
• 20 Great CSS Web Galleries