بی‌اس.آکادمی
Bs.Academy

فهرست مطلب

سفارش آنلاین پروژه
آنلاین پروژه ات رو سفارش بده !
خصوصیت z-index در CSS

توی این جلسه از دوره آموزش CSS میخوایم یه خصوصیت جالب معرفی کنیم به نام z-index ! این خصوصیت میاد از محورهای جدیدی استفاده میکنه ! یعنی ما توی صفحه دو بعدی که جلومون هست یه محور افقی داریم و یکی هم عمودی که توی ریاضی بهش میگن محور x و محور y . حالا محور z چی میشه !؟ میشه از سمت صفحه مانیتور به سمت بیرون ! یعنی اگه ما بخوایم بیایم دو تا المان رو زیر و روی هم بذاریم از این قابلیت استفاده می کنیم و یکی میره زیر و اون یکی میاد روی اون یکی !

				
					img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
				
			

برای استفاده از این المان باید کمی تجربی کار کنین چون واقعا توی کلمات نمی گنجه ! در زیر چند تا مثال آوردیم که میتونین اون ها رو توی کدهاتون اجرا کنین و ببینین چجوری میشه :

				
					<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  z-index: 1;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  z-index: 3;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  z-index: 2;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body data-rsssl=1>

<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>

</body>
</html>
				
			

و حالا بدون استفاده از z-index میشه مثال پایینی :

				
					<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body data-rsssl=1>

<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>

</body>
</html>