آموزش CSS - لایه های(layers)

در سی اس اس، شما می‌توانید لایه‌های مختلفی ایجاد کنید

ویژگی z-index در CSS برای کنترل ترتیب نمایش لایه‌ها یا عنصرها HTML در یک صفحه وب استفاده می‌شود. این ویژگی به ترتیب عددی مثبت یا منفی به عنصر‌ها اختصاص می‌دهد که نشان می‌دهد عنصر با z-index بالاتر در لایه ترتیب نمایش قرار دارد یا روی عنصرها با z-index کمتر قرار دارد.

توضیحات مهم این ویژگی به شرح زیر است:

مقدار z-index:

مقدار z-index یک عدد صحیح است.
مقادیر بزرگتر نشان‌دهنده لایه‌هایی هستند که بالاتر قرار دارند.
استفاده در عنصرها مطلق و نسبی:

z-index معمولاً در عنصرها با position: absolute, position: relative, یا position: fixed استفاده می‌شود. عنصرها با position: static از z-index تأثیر نمی‌پذیرند.
تأثیر مستقیم بر فرزندان:

z-index بر روی عنصر مستقیماً تأثیر می‌گذارد و بر فرزندان آن تأثیر ندارد. یعنی اگر یک عنصر با z-index بالا فرزند داشته باشد، این z-index به فرزندان انتقال نمی‌یابد.
مقدار پیش‌فرض:

مقدار پیش‌فرض z-index برابر با auto است که بر اساس ترتیب الصاق عنصر‌ها در DOM تعیین می‌شود.
مقادیر منفی:

می‌توان مقادیر منفی هم برای z-index استفاده کرد. عنصرهای با z-index منفی کمتر از عنصرهای با z-index صفر قرار می‌گیرند.

ویژگی z-index به شما کمک می‌کند تا طرح‌های پیچیده‌تری از صفحات وب ایجاد کنید.

مثال زیر نحوه ایجاد لایه‌ها با استفاده از ویژگی z-index را نشان می‌دهد. عناصر با مقدار بالاتر از z-index، بالاتر از عناصر با مقدار کمتر از z-index قرار می‌گیرند


<html>
<head>
<style>
   .box1 {
      position: absolute;
      height: 100px;
      width: 100px;
      background-color: red;
      z-index: 1;
      padding: 3px;
      left: 10px;
      top: 10px;
   }
   .box2 {
      position: absolute;
      height: 100px;
      width: 100px;
      background-color: lightblue;
      z-index: 2;
      padding: 5px;
      margin: 10px;
      left: 50px; 
      top: 30px;
   }
   .box3 {
      position: absolute;
      height: 100px;
      width: 100px;
      background-color: yellow;
      z-index: 3;
      padding: 5px;
      margin: 20px;
      left: 80px; 
      top: 50px;
   }
   p {
      margin-top: 200px;
   }
</style>
</head>
<body>
   <p>The element with z-index value of 1 appears behind the elements with the z-index value of 2 and 3.</p>
   <div class="box1">
      CSS z-index: 1
   </div>
   <div class="box2">
      CSS z-index: 2
   </div>
   <div class="box3">
      CSS z-index: 3
   </div>
</body>
</html>

تصاویر و متن

مثال زیر نحوه ایجاد لایه‌ها با استفاده از ویژگی z-index را نشان می‌دهد. عناصر با مقدار بالاتر از z-index، بالاتر از عناصر با مقدار کمتر از z-index قرار می‌گیرند −


<html>
<head>
<style>
   img {
      height: 200px;
      width: 200px;
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: 2;
      margin: 5px;
   }
   h1 {
      margin-top: 30px;
      z-index: 1;
      color: red;
   }
</style>
</head>
<body>
   <img src="images/shop.png">
   <h3>Tutorialspoint</h3>
</body>
</html>

ایجاد لایه بدون استفاده از ویژگی z-index

مثال زیر نشان می‌دهد چگونه لایه‌ها را بدون استفاده از ویژگی z-index ایجاد کنیم


<html>
<head>
<style>
   .box1 {
      position: absolute;
      height: 210px;
      width: 210px;
      background-color: red;
      padding: 10px;
      left: 10px;
      top: 10px;
   }
   .box2 {
      position: absolute;
      height: 150px;
      width: 150px;
      background-color: lightblue;
      padding: 10px;
      margin: 10px;
      left: 30px; 
      top: 30px;
   }
   .box3 {
      position: absolute;
      height: 100px;
      width: 100px;
      background-color: yellow;
      padding: 5px;
      margin: 10px;
      left: 60px; 
      top: 60px;
   }
</style>
</head>
<body>
   <div class="box1">
      Box 1
   </div>
   <div class="box2">
      Box 2
   </div>
   <div class="box3">
      Box 3
   </div>
</body>
</html>

موقعیت(positioning) - درس قبلی

درس بعدی - شبه کلاس ها(pseudo classes)