Z-index: Understanding CSS z-index:Adding z-index

Understanding CSS z-index:Adding z-index From MDC [edit] Adding z-index The first example, Stacking without z-index, explains how stacking is arranged by default. If you want to specify a different stacking order, you have to use the z-index property. This property is assigned with an integer value (positive or negative), which represents the position of the element along the z-axis. If you are not familiar with the z-axis, imagine the page has several layers one above the other. Each layer is numbered. A layer with a greater number is rendered above layers with smaller numbers. The above is incorrect! z-index only applies if an element is positioned. The image below displays a bug in Firefox that has since been fixed. Since #normdiv has no positioning it does not matter what its z-index is and it is stacked as if it had no z-index specified (in this case, under everything else). (Edit by another user – FF seems to not support a negative z-index value) bottom: furthest from the observer … Layer -3 Layer -2 Layer -1 Layer 0 default rendering layer Layer 1 Layer 2 Layer 3 … top: closest to the observer Notes: When no z-index property is specified, elements are rendered on the default rendering layer 0 (zero). If several elements share the same z-index value (i.e. they are placed on the same layer), stacking rules explained in the section Stacking without z-index apply. In the next example, the layers’ stacking order is rearranged using z-index. DIV#5, normally below all the others, is now above all of them because it has the greatest z-index. Example source code div { opacity: 0.7; font: 12px Arial; } span.bold { font-weight: bold; } #normdiv { z-index: 8; height: 70px; border: 1px dashed #999966; background-color: #ffffcc; margin: 0px 50px 0px 50px; text-align: center; } #reldiv1 { z-index: 3; height: 100px; position: relative; top: 30px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; text-align: center; } #reldiv2 { z-index: 2; height: 100px; position: relative; top: 15px; left: 20px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; text-align: center; } #absdiv1 { z-index: 5; position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #absdiv2 { z-index: 1; position: absolute; width: 150px; height: 350px; top: 10px; right: 10px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; }

DIV #1
position: absolute;
z-index: 5;
DIV #2
position: relative;
z-index: 3;
DIV #3
position: relative;
z-index: 2;
DIV #4
position: absolute;
z-index: 1;
DIV #5
no positioning
z-index: 8;
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s