مشاهده تصویر بزرگتر

ویژگی z-index در css

ویژگی z-index در css | ویژگی z-index در css | خاصیت z-index | صفت z-index

در این مقاله از سایت آموزی به بررسی و تحلیل صفت z-index در CSS می پردازیم.

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

یعنی مشخص می کند که عنصر, رو یا زیر عنصر یا عناصر دیگر قرار بگیرد.

این ویژگی یک عدد صحیح را به عنوان مقدار می پذیرد پس اعداد مثبت, منفی و صفر قابل قبول می باشند.

به مثال زیر توجه کنید:

z-index: 1;
z-index: 10;
z-index: -4;
z-index: 0;

z-index: 1;

z-index: 10;

z-index: -4;

z-index: 0;

فرض کنید چند عنصر روی هم قرار دارند, عنصری که z-index بیشتری داشته باشد.

در ظاهر به بیننده نزدیک تر خواهد بود و عنصری که z-index کمتری داشته باشد.

روی محور Z قبل از عناصر دیگر قرار می گیرد، یعنی از بیننده دورتر خواهد بود و زیر عناصر دیگر قرار خواهد گرفت.

زمانی که مرورگر در حال چیدمان عناصر در کنار هم می باشد, در مورد عناصری که روی هم قرار می گیرند نیاز دارد تا تصمیم بگیرد ترتیب آنها به چه صورت است.

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

محور Z را نیز می توان برای عناصر در نظر گرفت.

در تصویر زیر محور مختصات یک عنصر نگهدارنده و فرزندانش نمایش داده شده است

و با افزایش z-index عنصر در راستای محور Z در چشم بیننده نزدیک تر به نظر می رسد:

در حالت عادی یعنی زمانی که عناصر در flow پیشفرض قرار دارند.

مرورگر عناصری که زودتر می آیند را پایین تر و عناصری که بعد از آنها قرار دارند روی آنها نمایش می دهد.

اما قصه همیشه به این سادگی نیست.

زمانی که عنصری از flow عادی صفحه خارج شود، تصمیم گیری برای مرورگر کمی پیچیده تر می شود.

دو روش برای تاثیر بر flow یک عنصر در css وجود دارد:

زمانی که عنصری دارای position غیر از حالت پیشفرض یا همان static باشد.

زمانی که عنصر دارای ویژگی float باشد.

عناصری که دارای مقدار position به غیر از static می باشند. مثلا absolute, relative و غیره. که در بین آنها نیز هر کدام در کد آخر تر باشند به بیننده نزدیک تر هستند.

عناصر inline. (که البته position آنها static است)

عناصری که float گرفته اند (که البته position آنها static است) و در بین آنها عنصری که در کد آخر است به بیننده نزدیک تر است.

عناصری که نه position و نه float دارند اما از نوع block هستند.

عنصر ریشه یا همان html

تصویر زیر این ترتیب را نیز بیان می کند.