تبلیغات
p5soft | دانلود نرم افزار,طراحی سایت,طراحی قالب وبلاگ
پرواز تفریحی پاراگلایدر
پرواز تفریحی پاراگلایدر پرواز تفریحی پاراگلایدر

دوشنبه 13 آبان 1392

آموزش طراحی وبسایت - خاصیت z-index

نویسنده: امیر حسینی   

خاصیت z-index 

خاصیت z-index ترتیب قرارگیری عناصر HTML بر روی هم را تعیین می کند. “stack level” یا ترتیب قرارگیری عناصر بر روی هم اشاره به موقعیت عنصر بر روی محور Z دارد(همانطور که در CSS محور X یا محور Y داریم). هرچه مقدار z-index یک عنصر بیشتر باشد به معنی رو بودن عنصر نسبت به بقیه عناصر است. این روی هم قرارگیری عناصر به صورت عمود بر روی صفحه است.

برای درک بهتر خاصیت z-index به این تصویر توجه کنید:


خاصیت z indexدر صفحات HTML ترتیب طبیعی و پیش فرض قرارگیری عناصر بر روی هم بر اساس یک سری از عوامل است. لیستی که در زیر می بینید از پایین ترین سطح قرارگیری تا بالاترین مرتب شده، در این لیست عناصر به صورت پیش فرض و بدون استفاده از خاصیت z-index بر روی هم قرار می گیرند:

1. عناصر دارای background و border.
2. عناصر فاقد خاصیت position و float که به صورت display:block باشند.
3. عناصر فاقد خاصیت position ولی دارای خاصیت float.
4. عناصر دارای خاصیت inline.
5. عناصر دارای خاصیت position.
اگر به درستی از خاصیت z-index استفاده شود می توان این ترتیب پیش فرض را تغییر داد.

استفاده از خاصیت z-index گاهی سبب سردرگمی طراحان وب می شود چرا که این خاصیت تنها وقتی کار می کند که در عناصر خاصیت position استفاده شده باشد، به این ترتیب شما باید از یکی از این خاصیت ها همراه با خاصیت z-index استفاده کنید:


position: absolute;
position: relative;
position: fixed;


به عنوان مثال اگر ما بخواهیم عناصر به ترتیب شکل زیر بر روی هم قرار بگیرند:


خاصیت z indexاز این خاصیت ها استفاده می کنیم:


#gray{
position: relative;
z-index: 1;
}
#blue{
position: relative:
z-index: 2;
}
#yellow{
position: relative;
z-index: 3;
}

از خاصیت z-index تمامی مرورگرها پشتیبانی می کنند.

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

موضوعات

قالب فلش فوق العاده زیبا و حرفه ای
سئو چیست؟
وبلاگ های تازه طراحی و مطلب گذاری شده
به اشتراک گذاشتن اینترنت PC با موبایل از طریق usb
اتصال مستقیم تبلت به اینترنت adsl
دفترچه راهنمای فارسی گوشی هوشمند سامسونگ
راهنمای کامل فعال سازی اینترنت ایرانسل (GPRS و EDGE)، بسته های افزایشی و تعرفه‌های مربوطه
ساخت کاربر VIP برای سایت های وردپرسی
/طرح-لایه-باز-اسلایدر-سری-اول.
دریافت کد « ما را حمایت کنید 2 »
دانلود قالب گالری عکس
اسلاید شوی حرفه ای
کد اسلاید شو برای وبلاگ
قالب های حرفه ای وبلاگ همراه با اسلایدشو
ابزار نمایش اسلایدر تصاویر
ابزار اسلایدر عکس برای نمایش چندین تصویر در وبلاگ
قالب همراه با اسلاید شو
کد عضویت کاربر
دانلود اسکریپت مدیریت کاربران AuthManager نسخه ۳
عوامل موثر در افزایش رنکینگ سایت در گوگل
نمایش توضیحات برای یک فیلد در کنار آن به صورت Tooltip نمایش کد
اسلایدشو با قابلیت پیش نمایش فریم ها- کد جاوا
فیلم فارسی آموزش جاوا اسکریپت (JavaScript) – بخش اول
آموزش ساخت تاریخ و روز با جاوا
کد جاوا اسکریپت تغیر رنگ پس زمینه با کلیک بر روی یک دکمه/لینک
آموزش انتقال بازدید کننده از دامنه قدیمی به دامنه جدید سایت یا وبلاگ
پیش فرض چگونه جاوا اسکریپت را بر روی مرورگر فعال کنیم؟ (+آموزش تصویری)
دانلود کتاب آموزش جاوا اسکریپت صورت کامل
اسکریپت پرداخت آنلاین بانک پارسـیان
اسکریپت سئو سایت در موتور های جستجوگر seo paneL
مراقب لیست سیاه متور های جستجوگر باشید!!
افزونه رمز گذاری روی لینک های دانلود مخصوص vip کردن سایت+آموزش استفاده
25 افزونه کاربردی برای مرورگر کروم
25 افزونه کاربردی برای مرورگر کروم- part2
بازاریابی شبکه های اجتماعی
کلمات کلیدی مطلب : آموزش - تنظیمات - فیس بوک - امنیت فیس بوک - facebook -
آموزش کامل تنظیمات فیس‌بوک(قسمت اول)
5 اشتباه در رایج در شبکه های اجتماعی
ابزارهای بازاریابی شبکه های اجتماعی - نبض وب سایت تان را در دست بگیرید
5 راه برای فروش توسط شبکه های اجتماعی
سوالات و مشکلات سری d سامسونگ
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
ستون های چندگانه در Css3
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
مرجع کامل دستورات CSS2
آموزش ساختن منوی بازشو توسط CSS
آموزش ساخت منوی عمودی ساده با CSS
آموزش ساخت منوی افقی ساده با CSS
آموزش هک کردن فیس بوک
آموزش هک و جلوگیری از هک شدن مودم ADSL

آمار وبلاگ

  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
  • P5design & PARAPINK5 Sales, I.R.I., Inc. All information applies to I.R. vehicles only
    tell number : 09365995390 | 09122061238 | 09022061238
    www.p5bisim.com