Z Index Css Property Examples

Understanding of z-index behaviour

0 Shares
0
0
0
0
0
0
0

Hello Friend, We have faced the issue that inspite of Z-Index:999999 which is highest. Still that object was not showing on front.

I went thought W3School – for reference Click here

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.

Note: z-index only works on positioned elements

  • position: absolute
  • position: relative
  • position: fixed
  • position: sticky

After W3School, I have read in MDN Docs Reference Click Here

Each and Every element will behave as you expected if its under 1 parent DIV with Position: Relative.

Z-Index will apply as per his Parent Class. Please check the below example for more understanding

Demo Link

<!DOCTYPE html>
<html>
<head>
	<title>Z-Index - Logic</title>
	<style type="text/css">
	* {
		margin: 0;
	}
	html {
		padding: 20px;
		font: 12px/20px Arial, sans-serif;
	}
	div {
		opacity: 0.7;
		position: relative;
	}
	h1 {
		font: inherit;
		font-weight: bold;
	}
	#div1,
	#div2 {
		border: 1px dashed #696;
		padding: 10px;
		background-color: #cfc;
	}
	#div1 {
		z-index: 5;
		margin-bottom: 190px;
	}
	#div2 {
		z-index: 2;
	}
	#div3 {
		z-index: 4;
		opacity: 1;
		position: absolute;
		top: 40px;
		left: 180px;
		width: 330px;
		border: 1px dashed #900;
		background-color: #fdd;
		padding: 40px 20px 20px;
	}
	#div4,
	#div5 {
		border: 1px dashed #996;
		background-color: #ffc;
	}
	#div4 {
		z-index: 6;
		margin-bottom: 15px;
		padding: 25px 10px 5px;
	}
	#div5 {
		z-index: 1;
		margin-top: 15px;
		padding: 5px 10px;
	}
	#div6 {
		z-index: 3;
		position: absolute;
		top: 20px;
		left: 180px;
		width: 150px;
		height: 125px;
		border: 1px dashed #009;
		padding-top: 125px;
		background-color: #ddf;
		text-align: center;
	}		
</style>
</head>
<body>
	<div id="div1">
		<h1>Division Element #1</h1>
		<code>position: relative;<br/>
		z-index: 5;</code>
	</div>

	<div id="div2">
		<h1>Division Element #2</h1>
		<code>position: relative;<br/>
		z-index: 2;</code>
	</div>

	<div id="div3">
		<div id="div4">
			<h1>Division Element #4</h1>
			<code>position: relative;<br/>
			z-index: 6;</code>
		</div>

		<h1>Division Element #3</h1>
		<code>position: absolute;<br/>
		z-index: 4;</code>

		<div id="div5">
			<h1>Division Element #5</h1>
			<code>position: relative;<br/>
			z-index: 1;</code>
		</div>
		
		<div id="div6">
			<h1>Division Element #6</h1>
			<code>position: absolute;<br/>
			z-index: 3;</code>
		</div>
	</div>
</body>
</html>

Thank you