Z+Index

==[|The Z-Index CSS Property: A Comprehensive Look] ==  Most CSS properties are quite simple to deal with. Often, applying a CSS property to an element in your markup will have instant results — as soon as you refresh the page, the value set for the property takes effect, and you see the result immediately. Other CSS properties, however, are a little more complex and will only work under a given set of circumstances. The z-index property belongs to the latter group. z-index has undoubtedly caused as much confusion and frustration as any other CSS property. Ironically, however, when z-index is fully understood, it is a very easy property to use, and offers an effective method for overcoming many layout challenges. In this article, we’ll explain exactly what z-index is, how it has been misunderstood, and we’ll discuss some practical uses for it. We’ll also describe some of the browser differences that can occur, particularly in previous versions of Internet Explorer and Firefox. This comprehensive look at z-index should provide developers with an excellent foundation to be able to use this property confidently and effectively. ===What is it? === The z-index property determines the stack level of an HTML element. The “stack level” refers to the element’s position on the //Z axis // (as opposed to the //X axis // or //<span style="background-color: transparent; font-family: 'Proxima Nova Italic','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; vertical-align: baseline;">Y // axis). A higher <span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">z-index value means the element will be closer to the top of the stacking order. This stacking order runs perpendicular to the display, or viewport. ====<span style="background-color: #ffffff; color: #333333; font-family: 'Proxima Nova Bold','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;">3-DIMENSIONAL REPRESENTATION OF THE //<span style="background-color: transparent; font-family: 'Proxima Nova Italic','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; vertical-align: baseline;">Z // AXIS: ==== <span style="background-color: #ffffff; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;"> <span style="background-color: #ffffff; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;">In order to clearly demonstrate how <span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">z-index works, the image above exaggerates the display of stacked elements in relation to the viewport. ===<span style="background-color: #ffffff; color: #333333; font-family: 'Skolar Bold',Palatino,Cambria,'Droid Serif',Georgia,'Times New Roman',Times,serif; font-size: 1.5em; vertical-align: baseline;">The Natural Stacking Order === <span style="background-color: #ffffff; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;">In an HTML page, the natural stacking order (i.e. the order of elements on the //<span style="background-color: transparent; font-family: 'Proxima Nova Italic','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; vertical-align: baseline;">Z // axis) is determined by a number of factors. Below is a list showing the order that items fit into a stacking context, starting with the bottom of the stack. This list assumes none of the items has <span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">z-index applied: <span style="background-color: #ffffff; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;">The <span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">z-index property, when applied correctly, can change this natural stacking order. <span style="background-color: #ffffff; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;">Of course, the stacking order of elements is not evident unless elements are positioned to overlap one another. Thus, to see the natural stacking order, negative margins can be used as shown below:
 * <span style="background-color: #ffffff; background-color: transparent; color: #333333; color: rgba(0,0,0,0.298039); font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-family: 'Skolar Regular',Palatino,Cambria,'Droid Serif',Georgia,'Times New Roman',Times,serif; font-size: 1.25em; font-size: 16px; vertical-align: baseline; vertical-align: baseline;">By <span style="background-color: transparent; color: #41b7d8; text-decoration: none; vertical-align: baseline;">[|Louis Lazaris]
 * <span style="background-color: #ffffff; background-color: transparent; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline; vertical-align: baseline;">Background and borders of the element that establish stacking context
 * <span style="background-color: #ffffff; background-color: transparent; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline; vertical-align: baseline;">Elements with negative stacking contexts, in order of appearance
 * <span style="background-color: #ffffff; background-color: transparent; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline; vertical-align: baseline;">Non-positioned, non-floated, block-level elements, in order of appearance
 * <span style="background-color: #ffffff; background-color: transparent; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline; vertical-align: baseline;">Non-positioned, floated elements, in order of appearance
 * <span style="background-color: #ffffff; background-color: transparent; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline; vertical-align: baseline;">Inline elements, in order of appearance
 * <span style="background-color: #ffffff; background-color: transparent; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline; vertical-align: baseline;">Positioned elements, in order of appearance

<span style="background-color: #dddddd; color: #333333; display: block; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;"> Grey Box <span style="background-color: #8daac3; color: #333333; display: block; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;"> Blue Box <span style="background-color: #ba945d; color: #333333; display: block; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;"> Gold Box <span style="background-color: #ffffff; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;">The boxes above are given different background and border colors, and the last two are indented and given negative top margins so you can see the natural stacking order. The grey box appears first in the markup, the blue box second, and the gold box third. The applied negative margins clearly demonstrate this fact. <span style="background-color: transparent; font-family: 'Proxima Nova Bold','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; vertical-align: baseline;">These elements do not have <span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">z-index values set ; their stacking order is the natural, or default, order. The overlaps that occur are due to the negative margins. ===<span style="background-color: #ffffff; color: #333333; font-family: 'Skolar Bold',Palatino,Cambria,'Droid Serif',Georgia,'Times New Roman',Times,serif; font-size: 1.5em; vertical-align: baseline;">Why Does it Cause Confusion? === <span style="background-color: #ffffff; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;">Although <span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">z-index is not a difficult property to understand, due to false assumptions it can cause confusion for beginning developers. This confusion occurs because <span style="background-color: transparent; font-family: 'Proxima Nova Bold','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; vertical-align: baseline;"><span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">z-index will only work on an element whose<span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">position property has been explicitly set to <span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">absolute, <span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">fixed , or <span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">relative. <span style="background-color: #ffffff; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;">To demonstrate that <span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">z-index only works on positioned elements, here are the same three boxes with <span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">z-index values applied to attempt to reverse their stacking order: <span style="background-color: #dddddd; color: #333333; display: block; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;"> Grey Box <span style="background-color: #8daac3; color: #333333; display: block; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;"> Blue Box <span style="background-color: #ba945d; color: #333333; display: block; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;"> Gold Box <span style="background-color: #ffffff; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;">The grey box has a <span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">z-index value of “9999″; the blue box has a <span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">z-index value of “500″; and the gold box has a <span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">z-index value of “1″. Logically, you would assume that the stacking order of these boxes should now be reversed. But that is not the case, because none of these elements has the<span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">position property set. <span style="background-color: #ffffff; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;">Here are the same boxes with <span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">position: relative added to each, and their<span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">z-index values maintained: <span style="background-color: #dddddd; color: #333333; display: block; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;"> Grey Box <span style="background-color: #8daac3; color: #333333; display: block; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;"> Blue Box <span style="background-color: #ba945d; color: #333333; display: block; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;"> Gold Box <span style="background-color: #ffffff; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;">Now the result is as expected: The stacking order of the elements is reversed; the grey box overlaps the blue box, and the blue box overlaps the gold. ===<span style="background-color: #ffffff; color: #333333; font-family: 'Skolar Bold',Palatino,Cambria,'Droid Serif',Georgia,'Times New Roman',Times,serif; font-size: 1.5em; vertical-align: baseline;">Syntax === <span style="background-color: #ffffff; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;">The <span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">z-index property can affect the stack order of both block-level and inline elements, and is declared by a positive or negative integer value, or a value of <span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">auto. A value of <span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">auto gives the element the same stack order as its parent. <span style="background-color: #ffffff; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; vertical-align: baseline;">Here is the CSS code for the third example above, where the <span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">z-index property is applied correctly: code format=" language-css" <span style="background-color: #ffffff; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; line-height: 1.5;">Again, it cannot be stressed enough, especially for beginning CSS developers, that the <span style="background-color: #f5f2f0; color: #4e4e4e; font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 0.8em; vertical-align: baseline;">z-index <span style="background-color: #ffffff; color: #333333; font-family: 'Proxima Nova Regular','Helvetica Neue',Calibri,'Droid Sans',Helvetica,Arial,sans-serif; font-size: 16px; line-height: 1.5;"> property will not work unless it is applied to a positioned element. code