Visibility And Z- Indext In CSS

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Visibility And Z- Indext In CSS</title>
    <style>
        .box {
            width: 150px;
            height: 150px;

        }

        #box1 {
            /* jis element ki z-index jada hota he wo eliment kam z-index wali eliment ke upar aa ja ta he  */
            /* z-index use karne ke liye dono eliment ko position dena zorori hota he  */
            position: relative;
            top: 100px;
            background-color: coral;
            z-index: 4;
        }

        #box2 {
            position: relative;
            top: 14px;
            background-color: rgb(104, 241, 12);
            z-index: 5;
        }

        #box3 {
            /* visibility: hidden; karne se elimant hide ho jata he aur eliment ki jaga reh jata he  */
            /* display: none; display none karne se eliment jagah ke sath hi hide ho jata he */
            background-color: cyan;
        }

        #box4 {
            background-color: rgb(228, 7, 7);
        }

        #box5 {
            background-color: rgb(233, 15, 186);
        }
    </style>
</head>

<body>
    <h1>Visibility and z index in css</h1>
    <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>

</body>

</html>

Comments

Post a Comment

Popular posts from this blog

grid-template-areas

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         .container {             display: grid;             /* call grid area with asign grid area name  */             grid-template-areas:                 ' navbar navbar navbar'                 'section section aside'                 'footer footer footer';         }         nav ul {             display: flex;             justify-content: center;             al...
Read more

Loop In javaScript

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Loop In javaScript</title> </head> <body>     <h1>javaScript Loop</h1>     <p id="demo"></p>     <p id="demo1"></p>     <h1>hello </h1>     <script>         // for loop         // let i=0;         // for(i=0; i<10; i++){         //     console.log(i)         // }         // let friends = ["Avengers", "Lost in Space", "Strangers", "Dark", "Chilling Adventure of Sabrina", "Martian", "intastrastailer"]         // for (let index1 = 0; index1 < friends.length; index1++) {        ...
Read more

css grid 2

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>css grid</title>     <style>         .container {             display: grid;             grid-template-columns: repeat(3, 4fr);             /* grid-template-rows: repeat(8, 1fr); */             grid-template-rows: 2fr 4fr 2fr;             /* grid-column-gap: 1rem ;             grid-row-gap: 2rem; */             grid-gap: 1rem;                   }         .box {             background-color: rgb(236, 214, 15);       ...
Read more