Layers in XHTML

       Previously you could only control the exact placement of pictures and images with tables - and it didn't work that well. Later we got layers, that in some ways work better. Among other things layers can overlap, so I can place some text over a picture.
       There are two tags for layers. <div> is a block element (so you can't have more divs inside each other), and <span> is an inline-element.
       divs and spans can be used to let things overlap, and to give very precise positions, but they can also be used more peacefully to come one after the other. Here's a small example.

<div style="background-color: green">
<span style="position: relative; left: 7px; top: 15px;
height: 97px; width: 100px; background-color: red; z-index=2">
Hi mum
</span>
<span style="position: relative; left: -37px; top: 5px;
height: 7px; width: 100px; background-color: yellow; z-index=1">
Hi grannie
</span>
</div>
       Here I use a div to surround my two spans. One span has size and position, and it is then placed within the div. The other span is on purpose placed below the first. They are enummerated with z-index, and the one with the highest z-index is on top.

Concept last updated: 28/08 2003.

Relations
is a kind of

Other sources

Lag i XHTML Layers in XHTML LINGO

Libellus