zeek27.html

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Visibility and Z-index</title>

     <style>

         /* visibility:hidden means you cannot see it but ther is an empty space.

 Whereas in display:none the empty space is filled by next element */

         .box{height: 150px;width: 150px;border: black solid 2px;}

         #box1{background-color: blue;visibility: hidden;}

         #box2{background-color: red;}

         #box3{background-color:green;}

         #box4{background-color: yellow;position: relative;top: 78px;z-index: 35;}

         #box5{background-color: rgb(255, 0, 212);position: relative;top: 45px;

               z-index: 32;}

         #box6{background-color: rgb(119, 0, 255);position: relative;top:23px;

                z-index: -1;}

         #box7{background-color: rgb(0, 255, 42);position: relative;top: 10px;

               z-index: -32;}

         #box8{background-color: rgb(255, 166, 0);position: relative;top: 10px;

                z-index: -34;}

         /* Z-index does not work for default(static) position you have to set 

  absolute,relative,fixed or stickyMore z-index means more priority in overlap i.e will

 appear when overlap occurs */

        

        .original{position: absolute;

           top: 1px;

        right: 4px;}

         #box-1{background-color: blue;}

         #box-2{background-color: red;}

         #box-3{background-color:green;}

         #box-4{background-color: yellow;}

         #box-5{background-color: rgb(255, 0, 212);}

         #box-6{background-color: rgb(119, 0, 255);}

         #box-7{background-color: rgb(0, 255, 42);}

         #box-8{background-color: rgb(255, 166, 0);}

     </style>

</head>

<body>

    <div class="box" id="box1"></div>

    <div class="box" id="box2"></div>

    <div class="box" id="box3"></div>

    <div class="box" id="box4"></div>

    <div class="box" id="box5"></div>

    <div class="box" id="box6"></div>

    <div class="box" id="box7"></div>

    <div class="box" id="box8"></div>

    <h1>Right side is original position before visibility or z index</h1>

    <ul>

    <li>Yellow(z-index:35)wins overlap with pink(z-index:32)</li>

    <li> 35>32</li>

    <li>Pink(z-index:32)wins overlap with purple(z-index:-1)</li>

    <li>32>(-1)</li>

    <li>Purple(z-index:-1)wins overlap with light green(z-index:-32)</li> 

    <li>(-1)>(-32)</li>

    <li>light green(z-index:-32)wins overlap with golden yellow(z-index:-34)</li>

    <li>(-32)>(-34)</li> </ul>

    <div class="original">

    <div class="box" id="box-1"></div>

    <div class="box" id="box-2"></div>

    <div class="box" id="box-3"></div>

    <div class="box" id="box-4"></div>

    <div class="box" id="box-5"></div>

    <div class="box" id="box-6"></div>

    <div class="box" id="box-7"></div>

    <div class="box" id="box-8"></div>

</div>

</body>

</html>