Nov 20, 2014

CSS-Property | Z-Index

You must be familiar with three-dimensional coordinate space: x-axis, y-axis and z-axis. X-axis is typically used to represent the horizontal, Y-axis represents the vertical and Z-axis represents what happens into and out of the page or the screen.

Similarly, CSS also operates in three dimensions- height, width and depth. Height and width are widely used but when we need to incorporate the 3rd dimension, we use z-index property of CSS.
 
We don't literally see the z-axis, as the screen is a two-dimensional plane but we see it in perspective form.

The z-index property controls the vertical stacking order of elements that overlap each other or share the same area on the screen i.e. some elements appear in front or behind of other elements giving a depth to the screen or page. Look at the example below:



One important thing to keep in mind is that z-index will only work on elements whose position property has been explicitly to absolute, fixed, or relative.


z-index can take the following values:

Value
Description
auto
Sets the stack order equal to its parents. This is default.
number
Sets the stack order of the element. Can be a positive number or negative number or 0, with any unit. The element with highest value will be positioned at the front.
initial
Sets this property to its default value.
inherit
Inherits this property from its parent element.




Browser issues with stacking

There are some small inconsistencies in Internet Explorer versions 6 and 7 with regards to the implementation of the z-index property.

In Internet Explorer 6, the <select> element is a windowed control, and so will always appear at the top of the stacking order regardless of natural stack order, position values, or z-index. This problem is illustrated in the example below:




In Internet Explorer versions 6 and 7, there is issue regarding stacking order of elements. An element with a z-index value of 100 will appear underneath an element with a z-index value of 1 if the former element is contained by a positioned parent, and the latter is not. This is an incorrect implementation of the z-index property that has evidently been corrected in IE8.

Hope to see you again. :)

0 comments:

Post a Comment