A small tip in CSS
Posted on May 28, 2009 by thaonguyen
Filed Under How To | Tags: css |
This is a small tips about z- index attributes of “CSS”. Get more details from :
http://www.echoecho.com/csslayers.htm
With CSS, it is possible to work with layers: pieces of HTML that are placed on top of the regular page with pixel precision.
The advantages of this are obvious - but once again Netscape has very limited support of CSS layers - and to top it off: the limited support it offers is quite often executed with failures.
So the real challenge when working with layers is to make them work on Netscape browsers as well.
First look at this example:
LAYER 1 ON TOP:
LAYER 2 ON TOP:
Second look at the code:
LAYER 1 ON TOP:
<div style=”position:relative; font-size:50px; z-index:2;”>LAYER 1</div>
<div style=”position:relative; top:-50; left:5; color:red; font-size:80px; z-index:1″>LAYER 2</div>
LAYER 2 ON TOP:
<div style=”position:relative; font-size:50px; z-index:3;”>LAYER 1</div>
<div style=”position:relative; top:-50; left:5; color:red; font-size:80px; z-index:4″>LAYER 2</div>
To create a layer all you need to do is assign the position attribute to your style. The position can be either absolute or relative.
The position itself is defined with the top and left properties.
Finally, which layer is on top is defined with the z-index attribute.
Leave a Reply