8 Good instances of <code>z-index</code> property

If you are new in CSS then you may find difficulty to understand about z-index property. In simple words z-index sets the stack order of specific elements. An element with greater stack order is always in front of another element with lower stack order.

In this post I'm sharing some good examples of z-index property to help upcoming web designers and developers. Here's the following list:

CSS z-index Property

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

How z-index works!

This page is to demonstrate how elements stack.

A Detailed Look at the Z-Index CSS Property

Most CSS properties that a web developer deals with regularly are instantaneous in their application to elements on the page.

OverlappingAndZIndex

There seems to be some confusion about how to get one element to appear on top of another. Do you add z-index: 1 or z-index: 1000? Why do some items overlap others, no matter how high the z-index value goes? This page hopes to clear this up.

Understanding CSS z-index

Usually HTML pages can be considered two-dimensional, because text, images and other elements are arranged on the page without overlapping. There is a single rendering flow, and all elements are aware of the space taken by others.

CSS2: z-index

Here is a post I wrote on webmasterworld.com to explain how z-index works. z-index goes hand-in-hand with the local stacking context. What is a stacking context? Whenever you specify a z-index, you create a new stacking context. Here's an example:

"Z's not dead baby, Z's not dead"

Developers I speak to often associate z-index with Dreamweaver’s layers feature. But in combination with alpha transparency support for PNG images in IE7 and full implementation of position property values, the stacking of elements with z-index is going to be big.

CSS Z-Index

The z-index property specifies the stack order of an element. In other words, when there is an overlap between two elements, the z-index value determines which one shows up on top. The element with a larger z-index value will appear on top.

Do you have any opinion, leave a comment.