Visibility and z-index

Visibility:

Visibility without value is vanity, and for this world, ability without visibility is nothing, for this world is like a webpage.

There are two ways to hide an element. display: none; and visibility: hidden;. Changing the display property affects the way element is placed into the page and setting it to none causes it to not be placed nor alloted any space and the document is rendered as though the element did not exist. All descendant elements also have their display turned off. Note that this isn't actually hiding but rather deleteing the element altogether.

To have an element take up the space that it would normally take, but without actually rendering anything, we use the visibility property instead. visibility: hidden; hides the element bu shows the empty space left behind.

Box 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Box 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Box 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Box 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Here, Box 1 and Box 4 are visible. Box 2 is hidden, whereas Box 3 is set to display: none;.


#box1 {
    background-color: lightblue;
    visibility: visible;
}

#box2 {
    background-color: bisque;
    visibility: hidden;
}

#box3 {
    background-color: lightsalmon;
    display: none;
}

#box4 {
    background-color: darkseagreen;
}

Z-Index:

The world is like a webpage, and elements use z-index to overshadow others.

Z-index only works with positioned elements. The element with higher z-index appears above the element with lower z-index.

Playground

I am Box-1

I am Box-2

I am Box-3

I am Box-4

I am Box-5


#box-z-1 {
    position: absolute;
    top: 41px;
    left: 14%;

    z-index: 1;
}

#box-z-2 {
    position: absolute;
    top: 333px;
    left: 12%;
    z-index: 2;
}

#box-z-3 {
    position: absolute;
    top: 132px;
    left: 31%;
    z-index: 3;
}

#box-z-4 {
    position: absolute;
    top: 262px;
    left: 35%;
    z-index: 4;
}

#box-z-5 {
    position: absolute;
    top: 223px;
    left: 50%;
    z-index: 5;
}