Layers
<!DOCTYPE html>
<html>
<head>
<title>Stack Ordering</title>
<style type="text/css">
#layer1 {
border: solid thick black;
background-color: brown;
padding: 10px;
width: 300px;
height: 200px;
position: absolute;
top: 100px;
left: 200px;
z-index: 1;
}
#layer2 {
border: solid thick black;
background-color: gray;
padding: 10px;
width: 300px;
height: 200px;
position: absolute;
top: 120px;
left: 220px;
z-index: 2;
}
#layer3 {
border: solid thick black;
background-color: white;
padding: 10px;
width: 300px;
height: 200px;
position: absolute;
top: 140px;
left: 240px;
z-index: 3;
}
</style>
</head>
<body>
<script type="text/javascript">
var toplayer = "layer3";
function mover(toTop) {
document.getElementById(toplayer).style.zIndex = "0";
document.getElementById(toTop).style.zIndex = "3";
toplayer = toTop;
}
</script>
<p id="layer1" onMouseOver="mover('layer1');">This is the last layer</p>
<p id="layer2" onMouseOver="mover('layer2');">This is the middle layer</p>
<p id="layer3" onMouseOver="mover('layer3');">This is the first layer</p>
</body>
</html>
Comments
Post a Comment