Web Devel

From Secure Computing Wiki
Revision as of 17:41, 23 November 2010 by Ijakigyzi (Talk | contribs)

Jump to: navigation, search


Page Is Unavailable Due To Site Maintenance, Please Visit Reserve Copy Page


CLICK HERE


For a list of useful links, see Web Devel/Links. For a list of useful graphics-art links, see Web Devel/Graphics.

For a good CSS positioning document, see http://www.brainjar.com/css/positioning/.

3D Layering

CSS 2.1+ has a z-index property which allows you to specify the layer a given element should appear on. By default, everything is rendered on z-index of 0. However, if there is more than one item on the same z-index, in the same location, they are layered as they're rendered.

Negative values move the item further away from the observer. Positive numbers move an element closer to the observer.

Default Layering

The following show 3 divs, placed in order, all along the default z-index. You'll see how they are layered on top as they're rendered.

<br /><br /><br /> <div style="position: relative; display: inline;"> <div style="padding: 4px; background-color: black; color: white; width: 100px; height: 100px; position: absolute; top: 0px; left: 0px;">This has a z-index of 0.</div>

<div style="padding: 4px; background-color: blue; color: white; width: 100px; height: 100px; position: absolute; top: 50px; left: 30px;">This has a z-index of 0.</div>

<div style="padding: 4px; background-color: red; color: white; width: 100px; height: 100px; position: absolute; top: -40px; left: 80px;">This has a z-index of 0.</div> </div> <br /><br /><br /><br /><br /><br /><br /><br /><br /> CODE: <pre> <div style="position: relative; display: inline;"> <div style="padding: 4px; background-color: black; color: white; width: 100px; height: 100px; position: absolute; top: 0px; left: 0px;">This has a z-index of 0.</div>

<div style="padding: 4px; background-color: blue; color: white; width: 100px; height: 100px; position: absolute; top: 50px; left: 30px;">This has a z-index of 0.</div>

<div style="padding: 4px; background-color: red; color: white; width: 100px; height: 100px; position: absolute; top: -40px; left: 80px;">This has a z-index of 0.</div> </div> </pre>

Specific Layering

The divs below are exactly the same as above, except we're specifying which z-index we want them to appear. For the sake of this example, we're going to code them in the same order, but have them display layered in the reverse direction:

<br /><br /><br /> <div style="position: relative; display: inline;"> <div style="z-index: 3; padding: 4px; background-color: black; color: white; width: 100px; height: 100px; position: absolute; top: 0px; left: 0px;">This has a z-index of 3.</div>

<div style="z-index: 2; padding: 4px; background-color: blue; color: white; width: 100px; height: 100px; position: absolute; top: 50px; left: 30px;">This has a z-index of 2.</div>

<div style="z-index: 1; padding: 4px; background-color: red; color: white; width: 100px; height: 100px; position: absolute; top: -40px; left: 80px;">This has a z-index of 1.</div> </div> <br /><br /><br /><br /><br /><br /><br /><br /><br /> CODE: <pre> <div style="position: relative; display: inline;"> <div style="z-index: 3; padding: 4px; background-color: black; color: white; width: 100px; height: 100px; position: absolute; top: 0px; left: 0px;">This has a z-index of 3.</div>

<div style="z-index: 2; padding: 4px; background-color: blue; color: white; width: 100px; height: 100px; position: absolute; top: 50px; left: 30px;">This has a z-index of 2.</div>

<div style="z-index: 1; padding: 4px; background-color: red; color: white; width: 100px; height: 100px; position: absolute; top: -40px; left: 80px;">This has a z-index of 1.</div> </div> </pre>