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

Popular posts from this blog

Web

Lab 1 ai