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.
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:
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 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