صفحه اصلی >> بلاگ >> درک Z-Index در CSS

درک Z-Index در CSS

دسته:css تاریخ انتشار: 20 فوریه 2021 ایمان رضایی

Z-Index -1 چیست؟

ویژگی z-index ترتیب عناصر را بر روی محور z تعریف می کند. اصولاً روی عناصری با مقدار موقعیتی غیر از استاتیک کار می کند.

 

اردک و حلقه در یک والد (آب) قرار دارند. آیا می توانید حدس بزنید کدام یک جلوی دیگری می آید؟

<div class="water">

   <div class="duck"></div>

   <div class="ring"></div>

</div>

 

حلقه کمی جابجا شده است. توجه کنید که چگونه بالای اردک است. این بدان دلیل است که عناصر اخیر در HTML در مقابل عناصر قبلی نمایش داده می شوند.

.ring {
  margin-top: -28px;
}

 

برای اینکه اردک در جلوی حلقه ظاهر شود ، باید position: relative را اعمال کنیم.

.duck {
  position: relative;
}

عناصر موقعیت دار در مقابل عناصر غیر موقعیت دار ظاهر می شوند.

 

 -2نحوه قرار گرفتن عناصر روی هم(stacking) چگونه است

بیایید تصور کنیم که ما صحنه بالا را با HTML زیر نشان می دهیم.

<div class="pool">
   <img class="kid" src="kid.svg"/>
   <img class="ring" src="ring.svg"/>
   <img class="water" src="water.svg"/>
</div>

چگونه می توانیم آنها را مانند صحنه ای از زندگی واقعی روی هم قرار دهیم؟

من می خواهم کاری کنم که تصاویر با یکدیگر همپوشانی داشته باشند ، بنابراین حاشیه منفی اضافه کردم.

img {
  margin-top: -40px;
}

توجه داشته باشید که آب بالای حلقه است و حلقه نیز روی پسر. چرا این اتفاق می افتد؟

به طور پیش فرض ، عناصر بعدی در کد HTML در مقابل عناصر قبلی ظاهر می شوند.

برای ترتیب آنها ، باید position:relative و z-index را به دو مورد اول (کودک و حلقه) اضافه کنیم.


 
img {
  margin-top: -75px;
}

 
.kid {
  position: relative;
  z-index: 2;
}

 
.ring {
  position: relative;
  z-index: 1;
}

عناصر با z-index بالاتر در مقابل عنصری قرار دارند که دارای مقدار کوچکتر است.

 

 

z-index -3  منفی

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

<div class="water">
   <div class="duck"></div>
   <div class="ring"></div>
</div>

 

 

 

اردک توانست  z-index: -1 را به خودش اضافه کند و پنهان است. می توانید حدس بزنید کجا؟

.duck {
  position: relative;
  z-index: -1;
}

در مورد ما ، زیر والد (آب) است.

بر اساس نحوه کار ترتیب منبع ، عنصری با z-index منفی باید بالاتر از پس زمینه اصلی آن باشد.

 

افزودن position: relative و z-index بصورت خودکار از رفتن اردک به زیر والد خود جلوگیری می کند.

.water {
  position: relative;
  z-index: 1;
}

 
.duck {
  position: relative;
  z-index: -1;
}

اکنون ، اردک نمی تواند پشت والد خود قرار گیرد ، حتی اگر z-index: -9999 را به آن اضافه کنید. چرا؟ از آنجا که اردک بخشی از stacking context آب است.

بیایید درباره stacking context بیاموزیم.

 

Stacking contexts -4

این یک والد است که شامل یک یا چند عنصر است. این عناصر طبق قوانین ترتیب منبع روی هم قرار خواهند گرفت ، و مقادیر z-index آنها فقط در والد آنها معنی دارد.

<div class="water">
   <div class="ring"></div>
</div>

برای ایجاد یک stacking context برای آب و حلقه ، باید از یک مقدار position غیر استاتیک و از یک مقدار z-index غیر خودکار استفاده کنید.

.water {
  position: relative;
  z-index: 1;
}

 
.ring {
  position: relative;
  z-index: 1;
}

 

من دوست دارم که stacking context را به عنوان یک فهرست پوشه ای تصور کنم.

 

توجه داشته باشید که یک stacking context می تواند stacking context دیگر را جمع کند (تودرتوی AKA).

 

 

 -5چه چیزی stacking context جدید را ایجاد می کند؟

برای ایجاد stacking contexts استفاده از z-index و موقعیت مکانی ضروری نیست. در اینجا لیستی از آنچه باعث ایجاد stacking context می شود وجود دارد.

  • عنصری با مقدار موقعیت غیر از استاتیک و z-index غیر از خودکار.
  • عنصری که فرزند کانتینر فلکس با z-index غیر از خودکار است.
  • عنصری با opacity غیر از 1.
  • عنصری که تغییر شکل دیگری غیر از none دارد. و بیشتر.

بیایید چند نمونه را در مورد ایجاد stacking context(s) انباشته بررسی کنیم.

 

 

 

Opacity

در مثال زیر ، ما یک حلقه داریم و می خواهیم اردک جلوی آن باشد.

<div class="water">
   <div class="duck"></div>
   <div class="ring ring-purple"></div>
</div>

 

افزودن opacity  غیر از 1 یک stacking context  جدید ایجاد می کند.

.duck {
  opacity: 0.999;
}

من به اردک یک opacity  که کمتر از 1 است اضافه کردم ، و این کار تمام شد. اردک مقابل دو حلقه است.

 

CSS transforms

من می خواهم اردک را به جلوی حلقه بنفش انتقال دهم. چگونه میتونم اینو انجام بدم؟

<div class="water">
   <div class="ring ring-red"></div>
   <div class="duck"></div>
   <div class="ring ring-purple"></div>
</div>

 

 

 

با چرخاندن اردک ، مرورگر یک stacking contex جدید برای اردک ایجاد می کند. در نتیجه ، در مقابل حلقه بنفش ظاهر می شود.

.duck {
  transform: rotate(10deg);
}

 

Clip Path

استفاده از clip-path برای یک عنصر یک stacking context جدید ایجاد می کند.

<div class="water">
   <div class="ring ring-purple"></div>
   <div class="duck"></div>
</div>

 

افزودن clip-path ، stacking context جدیدی ایجاد کرد. در نتیجه ، حلقه بنفش جلوی اردک است.

.ring-purple {
  clip-path: polygon(
   50% 0%,
   100% 50%,
   50% 100%,
   0% 50%
  );
}

 

برای اینکه اردک در جلوی حلقه ظاهر شود ، باید یک stacking context با z-index غیر از auto به آن اضافه کنیم.

.ring-purple {
  clip-path: polygon(
    50% 0%,
    100% 50%,
    50% 100%,
    0% 50%
  );
}

 
.duck {
  position: relative;
  z-index: 1;
}

از آنجا که اردک یک عنصر موقعیت دار با z-index غیر از خودکار است ، در مقابل حلقه قرار می گیرد.

 

 

6- نحوه مرتب سازی منبع پیش فرض چگونه کار می کند

فرزندان یک stacking context به ترتیب زیر از پایین به بالا روی هم قرار می گیرند.

  • عنصر (های) فرزند با مقادیر z-index منفی
  • عناصر غیر موقعیت دار
  • عناصر مستقر با شاخص z-index: auto
  • عناصر مستقر با z-index: 1 یا بالاتر

 

7- مثالهای Stacking contexts

مثال 1: اردک و پشه

در شکل زیر ، سه عنصر داریم. آب ، حلقه قرمز و حلقه بنفش.

ما می خواهیم اردک را بالاتر از پشه قرار دهیم.

<div class="water">

   <div class="ring ring-red">

     <div class="duck"></div>

     <div class="mosquito"></div>

   </div>

   <div class="ring ring-purple"></div>

</div>

در نظر بگیرید که آب stacking context دارد.

.water {

  position: relative;

  z-index: 1;

}

 

من z-index: 1 را به اردک اضافه کردم تا بتواند آن را بالای پشه بسازد.

.duck {

  position: relative;

  z-index: 1;

}

اردک اکنون بالای پشه است و خوشحال است. با این حال ، بالای حلقه بنفش ظاهر می شود. چرا این اتفاق افتاد؟

از آنجا که حلقه بنفش در همان زمینه حلقه قرمز قرار دارد ، اما هیچ z-index ندارد ، در زیر اردک ظاهر می شود.

برای حل این مسئله ، باید stacking context را به حلقه قرمز وارد کنیم.

 

برای ایجاد یک stacking context برای حلقه قرمز ، من یک position CSS و z-index: 1 را به آن اضافه می کنم.

.ring-red {

  position: relative;

  z-index: 1;

}

راه حل دیگر افزودن z-index: -1 به حلقه بنفش است. این باعث می شود پشت حلقه قرمز قرار گیرد.

 

مثال 2: تغذیه اردک

اردک بسیار گرسنه است و در داخل حلقه قرمز گیر کرده است زیرا حلقه قرمز دارای stacking context است.

چگونه می توانیم ماهی را به اردک نزدیک کنیم تا بتواند غذا بخورد؟

<div class="water">

   <div class="ring ring-red">

     <div class="duck"></div>

   </div>

   <div class="fish fish-small"></div>

   <div class="fish fish-large"></div>

</div>

حلقه قرمز کمی چرخانده شده و از CSS transform استفاده شده است. این stacking context جدید ایجاد کرد.

.water {

  position: relative;

  z-index: 1;

}



.ring-red {

  transform: rotate(90deg);

}

 

با برداشتن stacking context از حلقه ، ماهی در مقابل حلقه قرار می گیرد. به این ترتیب ، اردک می تواند غذا بخورد.

بر اساس ترتیب منبع ، ماهی باید در بالا قرار گیرد زیرا آخرین عنصر در HTML است.

.water {

  position: relative;

  z-index: 1;

}



.ring-red {

  transform: none;

}

 

 

 

مثال 3: z-index: 9999

در این مثال ، z-index ماهی نسبت به حلقه قرمز بیشتر است.

<div class="water">

   <div class="ring ring-red">

     <div class="duck"></div>

   </div>

   <div class="fish fish-large"></div>

</div>

.water {

  position: relative;

  z-index: 1;

}
.fish {

  position: relative;

  z-index: 2;

}



.ring-red {

  position: relative;

  z-index: 1;

}

 

چگونه می توانیم اردک را جلوی ماهی حرکت دهیم؟ غیر ممکنه. اگر یک z-index به اردک اعمال کنیم ، این معنی فقط در stacking context (حلقه قرمز) خواهد بود. حتی با z-index: 9999 هم کاری از پیش نمی برد.

.duck {

  position: relative;

  z-index: 9999;

}

 

مشکلی که در مورد z-index وجود دارد این است که فقط در stacking context یک عنصر کار می کند. در مورد ما ، ما می خواهیم اردک ، که بخشی از stacking context حلقه قرمز است ، در مقابل ماهی باشد (یکی stacking context دیگر). این امکان پذیر نیست.

برای اینکه اردک در جلوی ماهی ظاهر شود ، باید stacking context را از حلقه قرمز جدا کنیم.

.fish {

  position: relative;

  z-index: 2;

}



.duck {

  position: relative;

  z-index: 1;

}



.ring-red {

  position: static;

  z-index: auto;

}

با این کار ، stacking context کنونی برای اردک و ماهی عنصر آب است.


n0
n50

برای ثبت نظر باید وارد سایت شوید یا ثبت نام نمایید.


نظر شما با موفقیت در سیستم ثبت گردید.