CSS z-index Property Example with demo




  1. The z-index property in CSS is used to specify the stack order of an element. It is used to control the vertical stacking order of elements that overlap each other on a web page. The higher the z-index value, the more forward the element will be placed on the page.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="democss.aspx.cs" Inherits="zindexdemocss.democss" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

  <title>ZIndexExample</title>

    <style>

        img {

            position: absolute;

            left: 0px;

            top: 0px;

            z-index: -1;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <h1> z-index Property Example</h1>

        <img src="download.jpeg" width="100" height="140"/>

            <p>This image has a z-index of -1 and  it will be placed behind the heading</p>

        </div>

    </form>

</body>

</html>


Now change the Z-Index =1000 and see the image position with below screen shot.

<style>

    img {

        position: absolute;

        left: 0px;

        top: 0px;

        z-index: 1000;

    }

</style>







DOT NET ADDA

interested in solving the problems based on technologies like Amazon AWS ,Google Cloud, Azure and Dot related technology like asp.net, C#, asp.net core API, swagger, react js,Jquery ,javascripts, bootstrap, css,html, ms sql,IIS,WPF ,WCF,Firebase,RDLC Report etc..

3 تعليقات

إرسال تعليق
أحدث أقدم