Difference between revisions of "Web Devel"

From Secure Computing Wiki
Jump to: navigation, search
(New page: For a good CSS positioning document, see [http://www.brainjar.com/css/positioning/ http://www.brainjar.com/css/positioning/]. == 3D Layering == CSS 2.1+ has a z-index property which allow...)
 
Line 1: Line 1:
 +
For a list of useful links, see [[Web Devel/Links]].
 +
 
For a good CSS positioning document, see [http://www.brainjar.com/css/positioning/ http://www.brainjar.com/css/positioning/].
 
For a good CSS positioning document, see [http://www.brainjar.com/css/positioning/ http://www.brainjar.com/css/positioning/].
  

Revision as of 12:57, 29 December 2008

For a list of useful links, see Web Devel/Links.

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.




This has a z-index of 0.
This has a z-index of 0.
This has a z-index of 0.










CODE:

<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>

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:




This has a z-index of 3.
This has a z-index of 2.
This has a z-index of 1.










CODE:

<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>