ویژگی z-index در CSS
ویژگی z-index، بُعد سوم (محور z) یا عمق المان ها نسبت به هم را مشخص می کند. به عبارتی دیگر ترتیب قرار گیری المان ها بر روی یکدیگر را مشخص می کند.
هنگامی که یک المان دارای position غیر static باشد، می تواند از ویژگی های top، right، bottom، left استفاده کند. استفاده از این ویژگی ها باعث می شود المان ها از جایگاه خود، جا به جا شوند و این امکان وجود دارد که المان ها روی یکدیگر قرار بگیرند و اصطلاحا هم پوشانی رخ دهد. در این زمان ویژگی z-index به ما اجازه ترتیب بندی المان ها را می دهد.
نکته: توجه داشته باشید که ویژگی z-index، بر روی المان های دارای position با مقدار relative,fixed,absolute,sticky اعمال می شود.
z-index: -2;
z-index: -1;
z-index: 0;
z-index: 1;
z-index: 2;کاربرد z-index در CSS
کاربرد ویژگی z-index:
- برای المان های دارای هم پوشانی (المان های روی یکدیگر) استفاده می شود.
- این ویژگی اعداد مثبت، صفر و منفی را به عنوان مقدار می پذیرد.
- المان هایی که مقدار z-index بزرگ تری دارند، المان هایی با مقدار کوچک تر را پوشش می دهند.
- مقدار ویژگی z-index به صورت پیش فرض، 0 می باشد.
#demo1 {
position: absolute;
}
#demo2 {
position: absolute;
}
#demo3 {
position: absolute;
}#demo1 {
position: absolute;
z-index: 1;
}
#demo2 {
position: absolute;
z-index: 3;
}
#demo3 {
position: absolute;
z-index: 2;
}خلاصه درس
- در این درس با ویژگی z-index در CSS و کاربرد آن آشنا شدیم.
توسعه دهندگان
احسان اسلامی
