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

دسته بندی: آموزش
زمان مطالعه: 2 دقیقه
۱۸ بهمن ۱۳۹۱

خصوصیت display

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

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 موقعیت دهی شده باشند. قاعده کلی:

  • 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 آشنا خواهیم شد

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

سید مهدی

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

meyti pugo

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

meyti pugo

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

سجاد دریس

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

علی امینی

آقا سجاد خیلی به ما لطف کردی با این آموزشایی که میزاری.
در پناه حق باشی

hassan-wp

سلام ای بابا بازم که تاخیر!

hassan-wp

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

سجاد دریس

سلام.
هر چند کار خیلی سختی ازم میخوای 😀 اما باشه سعیمو میکنم زود زود مطالب جدید رو بذارم.

kian14

دستتون درد نکنه

hassan-wp

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

سجاد دریس

چشم./

kian14

سلام آقا سجاد ممنون از آموزشاتون بسیار عالین
یه خواهش
میشه یه قالب کامل و خوب رو از اول تا آخر را همزمان با طراحی اون آموزش بدید
منظورم اینه که یه قالب خوب را از صفر شروع کنید به طراحی و نکته به نکته آموزش بدید تا کامل بشه خیلی خوبه من فکر میکنم اگر یه بار چنین آموزشی ببینیم یه چیز کاملی میاد دستمون و راحت میتونیم(حداقل خودم) یه قالب کامل و خوب طراحی کنیم.

سجاد دریس

سلام.
چشم،
ارائه چنین آموزشی توی برنامه سایت هست، ایشالا بعد از به پایان رسیدن، سری آموزشی css. سری آموزشی طراحی قالب رو هم شروع می کنیم، و با توجه به پیش نیاز هایی که بود ( html, css , javascript ) قول میدیم که آموزش طراحی یه قالب خوب رو خواهیم داشت

nejadi

اییییییییییییییییییییییییییییییییول 😉

هومن رهنما

عالیست

hassan-wp

دکت گرم بابا گفتیم !رفتی باز !
ایشا.. که آموزش ها سه روز سه روز آپدیت میشه دیگه

سجاد دریس

ایشالا

hassan-wp

یا خدا !دو ماه دیگه چه خبره ؟ 😆

سجاد دریس

😀
شوخی کردم.

نیاز به لاگین

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