Visual-Blast Media

Free web resources for designers and web developers | Free Icons, Tutorials, Scripts, Photoshop, CSS

How z-index works!

Understanding CSS z-index Property

Six draggable color boxes you can use your mouse to position them anywhere in the page. You can set z-index and position values for each one of these six boxes. Using Firebug, you can monitor in real time how these elements get styled.

Definition
The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.
Note: Elements can have negative stack orders. Z-index only works on elements that have been positioned (eg. position:absolute; position:relative;)!
Inherited: No

CSS z-index demonstration

Save to Del.ico.us | Digg This

  • del.icio.us
  • StumbleUpon
  • Digg
  • Design Float
  • Reddit
  • Slashdot
  • BlinkList
  • Furl
  • SphereIt
  • Spurl
  • description
  • Mixx
  • Facebook
  • LinkedIn
  • TwitThis
  • NewsVine
  • Ma.gnolia
  • YahooMyWeb
  • Live
  • Google

Related Free Resources:

Comments are closed.

Translations

English flagItalian flagKorean flagChinese (Simplified) flagPortuguese flagGerman flagFrench flagSpanish flagJapanese flagArabic flagRussian flagGreek flagDutch flagBulgarian flagCzech flagDanish flagFinnish flagHindi flagPolish flagRumanian flagSwedish flagNorwegian flag