Hi,
I like a demo on layers posted at
http://www.echoecho.com/csslayers.htm. It displays two text phrases in
separate layers visually overlapped, first with one on top and the
other beneath, and then vise versa.
The site also provided the code they claimed produced this
(overlapping) effect. I plugged their code into the body of a vanilla
html shown below, but the items were not overlapped, neither with
Firefox nor IE.
What mistake am I making?
TIA,
Richard
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Title</title>
</head>
<body ondblclick="MyFunction(3)">
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>
</body>
</html>
