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

 

خصوصیت display

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

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

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

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

برای آشنایی با کاربرد بقیه مقادیر نیز میتونید به سایت W3Schools مراجعه کنید.

آدرس صفحه

خصوصیت z-index


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

1 z-index: auto | integer

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

نکته : IE6 و IE7 از z-index پشتیبانی می کنند اما با کمی اشکال.


بسیار خب، با طریقه نمایش و لایه بندی عناصر در این جلسه آشنا شدیم، در جلسه بعدی با سه خاصیت opacity ، visibility و cursor آشنا خواهیم شد

ارسال نظر