z-index, opacity, visibility 

1. z-index: The z-index property in CSS3 specifies the stack order of an element. Elements with a higher z-index value will appear in front of elements with a lower z-index value. By default, elements have a z-index value of "auto", which means they will be stacked in the order they appear in the document.

2. opacity: The opacity property in CSS3 sets the transparency level of an element. The value can range from 0 (fully transparent) to 1 (fully opaque). This property is useful for creating partially transparent elements or making elements appear or disappear gradually.

3. visibility: The visibility property in CSS3 sets whether or not an element is visible. The values for the visibility property can be either visible or hidden. If an element has a visibility value of hidden, it will not be displayed on the page, but it will still take up space in the layout.

These properties allow you to control the appearance and stacking of elements on a web page, and can be used to create a wide range of visual effects. For example, you can use z-index and opacity together to create overlapping elements with varying levels of transparency. You can also use visibility to show or hide elements dynamically based on user interaction or other conditions.

Z-Index

'z-index' specify the stack of element, which element should be display on top . maximum value is display at top of all elemens. It works with property 'position' absolute,relative, fixed or sticky.

p{
    z-index: 9999;  /*  Bring in front of all elements which have lower z-index */
}

div{
    z-index: -100;   /*  send back to all elements which have  Higher z-index */
}

Opacity

Change the opacity of any html element. It make the html element transparent.

p{
    opacity: 80%;
    opacity: 0.6;
}

Visibility

visibility is used to hide the html element.

p{
    visibility: hidden;
    visibility: visible;
}

---