cssblog.ir logo
P

z-index

جلوگیری از مشکل قرارگیری عناصر در زیر/روی هم

این مشخصه همانند می‌تواند ترتیب قرار گرفتن عناصر از دید لایه ها کنترل کند

اگر با نرم‌افزارهای پردازش تصویر مانند فتوشاپ کار کرده باشید احتمالا با مفهومی به اسم «لایه» آشنا هستید. در چنین نرم‌افزارهایی لایه‌ها مفهومی بسیار کاربردی برای کنترل چیدمان عناصر روی هم هستند و به ما این امکان را می‌دهند تا کنترل کنیم عناصر به چه شکل رو یا زیر یکدیگر قرار بگیرند و جزئیات هرکدام تا چه حدی نمایان باشد.

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

البته نکته مهم این است که برای اینکه مشخصه z-index عمل کند نیاز است تا برای عنصر position تعیین شده باشد (position غیر ازstatic داشته باشد)

در چه مواقعی نیاز است تا از z-index استفاده کنیم؟

گاها که بنا به طرح رابط کاربری نیاز است تا عنصری روی عنصر دیگر قرار بگیرد که این کار معمولا با استفاده از position یا margin منفی انجام می شود و این شرایط باعث می شود تا نیاز به مشخص نمودن لایه ها با استفاده از z-index به وجود آید.

مقادیر پیشفرض z-index

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

ارتباط های والد و فرزندی

مدنظر داشته باشید که ارتباط های والد و فرزندی نیز بسیار در رفتارهای z-index موثر است. نمایی که از این رفتار ها بنظر می رسد این چنین است که انگار هر عنصر دارای z-index مانند مفهومی مانند یک گروه را تشکیل می دهد و z-index این گروه ها تعیین می کند که فرزندان آنها تا چه حد می توانند بالا بروند!

معنی عبارت قبلی با مثال: فرض کنید که دو عنصر A و B دارای z-index باشند و z-index عنصر A کمتر از B باشد. اگر عنصر A فرزندی داشته باشد که z-index آن بسیار بیشتر از B باشد، بازهم نمی تواند در هنگام نمایش در لایه ای بالاتر از B قرار بگیرد چراکه والد آن (A) به نسبت B دارای الویت پایین تری است.

 

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند