Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

CSS: Position and Visibility : Page 3

Learn how to position specified items on the screen as well as alter the visibility.


advertisement

Z-index: {z-index: XX}
The z-index property lets you set the stacking order of positionable elements. The boxesof elements can be stacked like pancakes. An element's z-index value determines if it appears in front or back of another element.

Z-index values are integers that place elements on specific stack levels relative to their siblings and parent elements. Elements can have the same z-index value and be placed on the same stack level. Using the z-index, sibling boxes are stacked by increasing z-index value from bottom to top. Although parent elements may have any z-index value, within their own z-orders they have a z-index value of 0. Children elements with negative z-index values generate boxes below their parent element, and children elements with positive z-index values generate boxes above their parent element.

If the z-index property is not used, the stack level of an element is determined by default by the element's position in the object hierarchy. Elements are stacked from bottom to top in the order they appear in the document tree, so an element is placed directly in front of its parent element.



The z-index property is useful when two elements occupy the same space and you need to specify which one should be visible. By default, if an element with transparent areas is stacked above another, it allows the element below it to be visible through its transparent areas.

Example:

These three elements are to occupy the same area on a Web page:

  • img.window

    window
  • img.logo

    logo
  • h1

    The z-index property.

Here are three different ways they could be stacked:



	img.window {z-index: 1}
	img.logo {z-index: 2}
	h1 {z-index: 3}
	

If you are using a CSS-enabled browser, see what the above code would look like here.



	img.window {z-index:3}
	img.logo {z-index: 1}
	h1 {z-index: 2}
	

If you are using a CSS-enabled browser, see what the above code would look like here.



	img.window {z-index: 2}
	img.logo {z-index: 3}
	h1 {z-index: 1}
	

If you are using a CSS-enabled browser, see what the above code would look like here.





Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date