Z-INDEX

ყველაფერი ნათელი გახდება, როცა მაგალითს განვიხილავ. ქვემოთ მოყვანილია HTML და CSS კოდები.
<!DOCTYPE HTML>
	<html>
	<header>
	<meta charset=utf-8>
	<title>ზეტ-ინდექსი</title>
	<link  href="zindex.css" type="text/css" rel="stylesheet" />
	</header>
	<body>
	<br/>
	<div id="parent" >
	<div class="children1">
	<h1>პირველი ბლოკი</h1>
	</div>
	<div class="children2">
	<h1>მეორე ბლოკი</h1>
	</div>
	<div class="children3">
	<h1>მესამე ბლოკი</h1>
	</div>
	</div>
	
	
	</body>
	</html>
*{
	margin: 0;
	padding: 0;
	}
	body{
	background:#fff;
	}
	p{
	font-size: 12px;
	color:#000;
	}
	h1{
	padding:0;
	}
	#parent {
	width: 400px;
	height:320px;
	margin: 0 auto;
	border: 3px solid #000;
	background:  #A9FFEA;
	position: relative;
	}
	
	
	.children1{
	position: absolute;
	top: 40px;
	left:40px;
	width: 150px;
	height:150px;
	border: 2px solid #544BFF;
	background:  #33FF0F;
	z-index:15;
	}
	.children2{
	position: absolute;
	top: 60px;
	left: 160px;
	width: 150px;
	height:150px;
	border: 2px solid #544BFF;
	background:  #F3FF0A;
	text-align:right;
	z-index:5;
	}
	.children3{
	position: absolute;
	top: 145px;
	left: 80px;
	width: 150px;
	height:150px;
	border: 2px solid #544BFF;
	background:  #FF2F14;
	z-index:10;
	}
	.children3 h1{
	display:block;
	margin:50px 0 0 35px;
	}
დააკოპირედ ეს კოდები, დაარქვით სწორი სახელები:  index.html და zindex.css და მიიღებთ შემდეგ სურათს:

Z-INDEX

 

 განვიხილოთ ეს სურათი: ვხედავთ, რომ პირველი ბლოკის ინდექსი 15-ის ტოლია, მეორესი 5, ხოლო მესამესი 10. შესაბამისად პირველი ბლოკი ყველაზე ზედა ფენაზეა, მესამე მის ქვედაზე, ხოლო მეოე სულ ბოლოშია, მშობელი ბლოკის ზევით. 
ჩაატარეთ სხვადასხა ექსპერიმენტი, ისე რომ ბლოკები სხვადასხვა შრეზე აღმოჩნდნენ. თუ z-index -ს უარყოფით მნიშვნელობას მივაბიჭებთ, ის მშობელი ბლოკის ქვეშ აღმოჩნდება და ვერ დავინახავთ, მაგრამ მშობელ ბლოკს თუ გამჭირვალეს გავხდით, მას დავინახავთ.
 
ჩვენ დავამთავრეთ კურსის პირველი ნაწილი. მომავალი წლიდან პრაქტიკულ ნაწილს დავიწყებთ და შევქმნით მარტივ საიტებს.