Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Set an Element's Overlap (z-index)

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.

This element
first in code.
This element
second in code.

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.

This element
first in code.
This element
second in code.

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>

This element's
z-index is -1
This element's
z-index is 0

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

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268