CSS Z-INDEX
Positioning of elements in CSS occurs in three dimensions, not just two. The third dimension is perpendicular to the screen, giving the screen a sense of depth. Elements can be overlapped, with “higher”, or “closer” elements obscuring elements that are “lower” or “farther away” (element transparency becomes an important issue with this capability.) The placement of elements along this third ‘z-axis’ is exactly what this property controls.
Each element’s rendering box is automatically assigned an integer z-index stacking level based on its context in the document. Boxes with greater z-axis numbers will appear in front of boxes with lower z-axis numbers (‘0’ and negative numbers are allowed.)
Explicitly setting the ‘z-index’ property for an element box not only sets its z-position relative to other element boxes in its current context, it also initiates a new stacking context hierarchy, in which the current element box and its child elements partake.
If two or more boxes have the same stacking level within the same context, they are rendered back to front in the order of the document tree. If no ‘z-index’ property is set for an element box, it inherits the stacking level of its parent element box.
Example
h2 {
display: block;
position: absolute;
top: 20px;
right: 50px;
bottom: 20px;
left: 50px;
z-index: 3
}
content
Possible Values
inherit: Explicitly sets the value of this property to that of the parent.
auto: The stack level of the current element’s box in the current context is the same as that of its parent’s. A new local stacking context is not created.
[integer]: This indicates the stack level of the current element’s box in the current context. A new local stacking context is created by the current element, with its stack level being 0. Positive and negative integers are allowed.
4 Responses
I am new to CSS so bear with me…
I would like to know if true 3rd dimension is being taken the next step…
Web pages still ‘apparently’ rely on 2D space (with the third axis being a layer space.)
With faster processors and graphics cards it would be interesting to consider full 3D space with elements in true 3D space including 3D rotation, zooming on z-azis, etc., etc…
Is this a possibility…?
-Fran
Great, I understood z-index property as work like Layers and we can order easily arrange our CSS property order wise.
For example in CSS order in our HTML look like follows layer0,layer1,layer3 here,
I put layer0=z-inded:2; layer1=z-index:3; layer3=z-index:1;
Now,
New CSS order is layer3,layer0,layer1;
This is works for Postion:absolute,relative and fixed.
Thanks
Thanks
nice info! thanks
please clarify more about z-index if possible.