Set an Element's Overlap (z-index)

By Stephen Bucaro

In geometry, a location in space can be defined by its position on three axis, the horizontal or x axis, the vertical or y axis, and the x axis, which, in the case of the computer screen points from the screen to the viewers eye. Rather than define a value on the z axis, CSS gives each element a z-index.

Visualize the z-index of 0 as being the surface of the computer screen. The default z-index is 0. If two elements positions are set so that they overlap, the default z-indexes of the elements will be determined by their order in the code. The last element defined in code will cover elements defined earlier in the code.

By setting a z-index property, you can explicity define how you want elements to overlap. You can even set negative values of z-index, in other words a z-index or -1 places the element behind other elements that have a z-index of 0.

Above is an example of default z-order. The red element appears before the green element (left to right) on the webpage, but because the red element appears after the green element in the code, it overlaps the green element.

After setting the z-index of the green element higher than than the z-index of the red element, the green element overlaps the red element.

<div style="position:absolute; left:40px; top:20px; border-style:solid; border-width:1px; background-color:#80ff80; z-index:1;">
This element<br /> first in code.</div>
<div style="position:absolute; left:0px; top:0px; border-style:solid; border-width:1px; background-color:#ff8080; z-index:0;">
This element<br /> second in code.</div>

Above, we acomplish the same thing by setting the z-index of the red element to -1.

More CSS Quick Reference:
• Set the Line Spacing
• Set an Element's Clipping
• Use Inline Style
• Set the Border Style
• CSS background-origin Positions Background
• How to Define and Apply a Style Class
• Set the Font Variant
• Specifying Color
• Set a Background Image's Position
• Indent the First Line of Text

RSS Feed

 Follow @Stephen Bucaro

 General Web Design
 HTML Quick Reference
 CSS Quick Reference
 Java Script Quick Reference
 HTML Design
 Graphics Design
 Easy Cascading Style Sheets
 Easy Java Script Code
 Web Design Tools
 Coding Issues