Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX

By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.


CSS: Position and Visibility : Page 3

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




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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.


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

  • img.window

  • img.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.



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