50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

آموزش CSS – لایه بندی با محور Z در CSS

  • آپدیت شده در تاریخ

آموزش CSS

در جلسه قبل از آموزش CSS با خصوصیت position در CSS آشنا شدید. در این بخش قصد داریم شما را با لایه بندی در CSS آشنا کنیم.

محور Z در CSS برای ترکیب با موقعیت استفاده می شود تا همانند اثر لایه های فتوشاپ را در صفحه وب نشان دهد.

انباشتن عناصر در لایه هایی که از محور Z استفاده می کنند

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

هر چند علاوه بر موقعیت عمودی یا افقی، جعبه ها در طول محور zانباشته می شوند.

در واقع با استفاده از محور z در CSS صفحات روی یکدیگر قرار می گیرند. این خاصیت باعث می شود صفحات زیادی که موقعیت آن ها مطلق، نسبی یا ثابت است بر روی یکدیگر انباشته شوند.

موقعیت محور Z هر لایه به عنوان یک عدد صحیح به نمایندگی از سفارش های انباشته شده برای ارائه بیان شده است.

عنصری که عدد محور Z آن بیشتر باشد با عنصری که عدد محور آن کمتر است همپوشانی دارد.

محور Z در CSS به شما کمک می کند بتوانید لایه های پیچیده تری از صفحات وب ایجاد کنید. با توجه به مثال روش ساخت لایه ها در CSS را ببینید.

ویژگی z-index در CSS

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

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

فرض کنید چند عنصر روی هم قرار دارند, عنصری که z-index بیشتری داشته باشد در ظاهر به بیننده نزدیک تر خواهد بود و عنصری که z-index کمتری داشته باشد روی محور Z قبل از عناصر دیگر قرار می گیرد, یعنی از بیننده دورتر خواهد بود و زیر عناصر دیگر قرار خواهد گرفت.

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

آموزش CSS - لایه بندی با محور Z در CSS

فرض کنید در یک صفحه عناصری با انواع ویژگی ها وجود داشته باشند و قرار باشد همه آن عناصر روی هم نمایش داده شوند, در زیر ترتیب نمایش آنها آمده است. توجه داشته باشید اولین آنها به بیننده نزدیک تر و و آخرین آنها از بیننده دورتر و زیر دیگر عناصر قرار دارد:

  • عناصری که دارای مقدار positionی غیر از static می باشند. مثلا absolute, relative و غیره. که در بین آنها نیز هر کدام در کد آخر تر باشند به بیننده نزدیک تر هستند.
  • عناصر inline. (که البته position آنها static است)
  • عناصری که float گرفته اند (که البته position آنها static است) و در بین آنها عنصری که در کد آخر است به بیننده نزدیک تر است.
  • عناصری که نه position و نه float دارند اما از نوع block هستند.
  • عنصر ریشه یا همان html.

تصویر زیر این ترتیب را نیز بیان می کند. بهتر است با کلماتی که روی هر یک نوشته شده است آشنا شوید:

آموزش CSS - لایه بندی با محور Z در CSS

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

نکته: z-index فقط بر روی عناصری که دارای position (غیر از مقدار static) هستند تاثیر می گذارد.

 

امیدوارم در این بخش آموزش CSS, از لایه بندی با محور Z در CSS نهایت استفاده را برده باشید.

در بخش بعدی با ویژگی float در CSS آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۲)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. زهرا ۲۶ فروردین ۱۳۹۸

    سلام.ببخشید من Z-indexهم دادم اما منو زیر اسلایدم باز میشه.چ کار کنم؟
    http://s9.picofile.com/file/8357510126/اسلایدر_منتخب.zip.html

    پاسخ
    1. حسن شفیعی ۲۶ فروردین ۱۳۹۸

      سلام. طبق گفته های دیدگاه های قبلی و بررسی این فایل که ارسال کردید.
      برای حل لایه بندی منو ها و مخفی نشدن زیر اسلایدر این استایل را به یکی از فایل های css خود اضافه کنید
      .ace-responsive-menu > li > ul.sub-menu > li { z-index: 999 }
      همچنین برای حل مشکل فاصله بد بین منو و اسلایدر در فایل demo.html در خط ۸۵ مقدار height:200px; را بردارید و حذف کنید تا ظاهر سایت اوکی بشه.
      موفق باشید.

      پاسخ
دوره های آموزشی

می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

50% تخفیف ویژه
فقط 144 هزار تومان

برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
می خواهم طراحی سایت را یاد بگیرم
close-link