طریقه نمایش و لایه بندی عناصر

 طریقه نمایش و لایه بندی عناصر 

در این جلسه  طراحی سایت شما را با طریقه نمایش و لایه بندی عناصر آشنا می کنیم:

خصوصیت display

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

none , block , inline , inline-block , list-item , run-in , compact , table , table-row-gro
 up , table-header-group , table-footer-group , table-row , table-column-group , table-colum
 n
 , table-cell , table caption , ruby , ruby-base , ruby-text , ruby-base-group , rubu-text
 -group

پر کاربرد ترین مقادیر در بین این ۲۵ مقدار:

none : عدم نمایش عنصر (مخفی کردن)
Block : نمایش عنصر (اگر مخفی بود) و این صورت که یک خط خالی قبل و بعد از خود ایجاد خواھد کرد.
Inline : اگر این مقدار را به یک عنصر block بدھیم، خط قبل و بعد از خود را از بین میبرد.
item-List : عنصر را به شکل لیست درمی آورد ( مانند استفاده از تگ <li> )
برای آشنایی با کاربرد بقیه مقادیر نیز میتونید به سایت W3Schools مراجعه کنید.

لینک W3Schools

خصوصیت index-z

خاصیت index-z موقعیت عناصر را در طول محور نامرئی z کنترل می کند. مشروط به اینکه عناصر به صورت , absolute
relative و یا fixed موقعیت دھی شده باشند. قاعده کلی:

z-index: auto | integer

مقدار پیشفرض : auto
Integer :1, 2 ,3 ,4 ,5 …… n
در حالت auto اگر چند عنصر با یکدیگر تداخل داشته باشند، عنصری که آخر از ھمه در ترتیب عناصر فایل
HTML وارد شده در صفحه نمایش بالاتر قرار میگیرد ( نسبت به محور z که بر صفحه نمایش عمود است) و
باقی عناصر نیز به ھمین ترتیب گفته شده قرار خواھند گرفت ( در حالت auto عنصری که اول از ھمه وارد
شود در زیر سایر عناصر قرار خواھد گرفت). میتوان با تخصیص مقادیر integer به خاصیت index-z ترتیب قرار
گیری عناصر در راستای محور z را تغییر داد. عنصری که مقدار عددی بالاتری دارد بالا (مافوق) سایر عناصر در
صفحه نمایش داده خواد شد و ساید عناصر نیز به ترتیب بزرگی مقدار خود در صفحه ظاھر خواھند شد.
نکته : IE6 و IE7 از index-z پشتیبانی می کنند اما با کمی اشکال.
بسیار خب، با طریقه نمایش و لایه بندی عناصر در این جلسه آشنا شدیم، در جلسه بعدی
با سه خاصیت visibility ، opacity و cursor آشنا خواھیم شد