Page 43 - LoudOffice_Guide-to-HTML_Part-II_Advanced.PDF

at the same x and y coordinates, each new element will cover up the earlier elements. But
with the z-index property, you can specify the layer on which an object lies. By setting the
z-index higher or lower, you can move the object up or down in the stack.

In the example below, both lines of text sit at approximately the same absolute location on
the page (the second one is placed 10 pixels lower than the first). Normally, the second
element would be placed on top of the first element, but we can override this layering by
setting the elements' z-index properties.

< h t m l >
< h e a d >
< s t y l e t y p e = " t e x t / c s s " >
< ! - -
. o v e r { p o s i t i o n : a b s o l u t e ; t o p : 1 6 5 p x ; l e f t : 2 0 p x ; z - i n d e x : 2 ;
b a c k g r o u n d - c o l o r : g r e e n }
. u n d e r { p o s i t i o n : a b s o l u t e ; t o p : 1 7 5 p x ; l e f t : 2 0 p x ; z - index: 1;
b a c k g r o u n d - c o l o r : p i n k }
- - >
< / s t y l e >
< / h e a d >
< b o d y >
< s p a n c l a s s = " o v e r " > T h i s t e x t i s p o s i t i o n e d 2 0 p i x e l s f r o m t h e
l e f t a n d 1 6 5 p i x e l s f r o m t h e t o p o f t h e w i n d o w . < / s p a n >
< s p a n c l a s s = " u n d e r " > T h i s t e x t i s p o s i t i o n e d j u s t b e l o w t h e a b o v e
t e x t , a n d w o u l d u s u a l l y b e p l a c e d o n t o p b e c a u s e o f i t s o r d e r o n
t h e p a g e . < / s p a n >
< / b o d y >
< / h t m l >

LoudOffice.com Guide to HTML – Part II Page 43