Z-index properties in CSS3

How to make the text behind image hide and visible using z-index property in CSS

Z-index

The z-index property specifies the stack order of an element, an element with greater stack order is always in front of an element with a lower stack order.

There are different properties of z-index they are

Z-index

The z-index property specifies the stack order of an element.

<style>
        img {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <h1>TechFunda</h1>
    <img src="index.jpg" />
    <p>TechFunda is a onlne tutorial with step by step explanations </p>
</body>

In the above code snippet we have defined the z-index with value 1 which hides text from the image by using value 1

output

Z-index with value -1

 <style>
        img {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: -1;
        }
    </style>
</head>
<body>
    <h1>TechFunda</h1>

    <img src="download.jpg" />
    <p>TechFunda is a onlne tutorial with step by step explanations </p>
</body>

Z-index value with -1

In the above code snippet we have defined z-index valkue with -1 which shows the text behind the image

output