- 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>
nice post
ReplyDeletegood example for beginners :)
ReplyDeleteexample is good for CSS beginners
ReplyDelete