آموزش CSS (فصل نهم) : طریقه نمایش و لایه بندی عناصر

- visibility ۱۹ mode_comment

خصوصیت display

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

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

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

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

آدرس صفحه

خصوصیت z-index

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

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

    info نکته :

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

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

comment دیدگاه کاربران
meyti pugo

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

سجاد دریس

سلام.
فرم همکاری رو پر کنید.

meyti pugo

یا شایدم فقط گرافیک وبسایت؟

سید مهدی

اَاَاَاَاَاَاَاَاَاَاَاَاَاَاَاَاَاَاَ. چه خبره!. من که سردرد گرفتم!. ولی نه یه چیزایی هم یاد گرفتما! 💡 🙄 😯 😯 😯

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2