w7

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Program7</title>
    <style>
        #stack1,#stack2,#stack3{
            position: absolute;
            padding: 10%;
            border: solid;
            width:150px;
            height: 50px;
            text-align: center;
        }
        #stack1{
            top:30%;
            left:30%;
            background-color: aqua;
        }
        #stack2{
            top:35%;
            left:35%;
            background-color: aquamarine;
        }
        #stack3{
            top:40%;
            left:40%;
            background-color: lightpink;
        }

   </style>
   <script>
    function totop(curelem){
        document.getElementById(curelem).style.zIndex="1";
    }
    function original(){
        document.getElementById('stack1').style.zIndex="0";
        document.getElementById('stack2').style.zIndex="0";
        document.getElementById('stack3').style.zIndex="0";

    }
   </script>
</head>
<body>
    <p id="stack1" onmouseover="totop('stack1')" onmouseout="original()">Hello! Good Morning</p>
    <p id="stack2" onmouseover="totop('stack2')" onmouseout="original()">Welcome to DSCE</p>
    <p id="stack3" onmouseover="totop('stack3')" onmouseout="original()">Thank You</p>
</body>
</html>