آموزش خاصیت z-index در css,در این پست می خوام در مورد کاربرد دقیق Z-index در css و css3 توضیحاتی رو ارائه بدم...می دونم که این سوال بیشتر کاربران هستش مخصوصا تو سایت های دیگه هم…

شعار سایت : به سه نفر کمک کنید،و از اون سه نفر هم بخواهید به سه نفر دیگه کمک کنن...

خبر رسان سه نفری
  • تست خوانندگی در سه نفری...(ببینم...)- 1395/04/18
  • هاست با پشتیبانی 24 ساعته...(ببینم...)- 1395/03/25
  • قالب جدید سه نفری رونمایی شد...(ببینم...)- 1395/03/03
☼ آمارکده سه نفری ☼
اطلاعات آماری

با توجه به گزارشات واصله از سرور رزبلاگ،آمار امروز بدین شرح میباشد...:

به طور کل تا این ساعت 1,833 نفر توی سایت حضور به هم رسوندن...

بازدید دیروزمون : 9,218

حالا اگه بخواهیم دقیقتر حساب کنیم به این شکل میشه...:

از این تعداد،44 نفر از گوگل اومدن مهمونی...

ورودی گوگل دیروزمون : 142

و 768 نفر هم با آی پی های متغیر وارد شدن...

آی پی های دیروز : 2779

راستی آمار کاربرامونم داریم...میگی نه ببین...:

کلاً 819 نفر تو سایت عضون...

بله ما یه ایطور چیزایی تو خودمون داریم...

کلاً توی سه نفری 182 تا پست ارسال شده،مفیدناااا...

از خدا که پنهون نیست،از شما چه پنهون...

همین الآن که شما اینجایی،5 نفر دیگه هم آنلاینن...

مثل خودم اهل آماریااا...خخخخ

بیا اینم بقیه آمار...:

کلاً تا به امروز 5,992,248 نفر از سایت مستفیذ شدن...

این ماه هم تا الآن 139,442 نفر بازدید داشتیم...

خدا رو شکر راضی هم هستیم...

بازم امری بود در خدمتت هستم...54.204.185.160

سلام به همگی...

اسم این سایتی که توش هستید سه نفریه...

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

اما برای تفریح هم وقت داریم...:)

هر جوری میتونین توی سایت رفتار کنین،ولی مطابق با قوانین باشه دیگه...

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

هر مشکلی هم بود بگید تا حلش کنیم...

اگه کد خاصی هم خواستید توی انجمن تاپیک بزنید و درخواست بدید...

دیگه زیاد حرف نمیزنم،فعلاً سایت رو بررسی کنید و لذت ببرید...

تفاضل آمار بازدید دیروز و امروز : در حال بررسی...
برای نمایش نتایج حاصل،کلیک کنید
تفاضل آمار گوگل دیروز و امروز : در حال بررسی...
برای نمایش نتایج حاصل،کلیک کنید
تفاضل آمار آی پی دیروز و امروز : در حال بررسی...
برای نمایش نتایج حاصل،کلیک کنید
☼ مطلب کده سه نفری ☼
پست های سایت
تبلیغات
Advertising Advertising Advertising
تبلیغات خود را به ما بسپارید...
☼ مهمان سرای سه نفری ☼
اعضای آنلاین
    مدیران و نویسندگان
    172 پست 104 پست 4 پست 7 پست 2 پست 0 پست 0 پست 0 پست 2 پست 5 پست 0 پست 0 پست 0 پست 0 پست 1 پست 0 پست 0 پست 0 پست 2 پست 2 پست 0 پست

    با سلام خدمت شما سروران گرامی...

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

    شما میتونید با کلیک بر روی نام هر مقامدار،از وضعیت کلی فعالیتش با خبر بشید...

    یه نکته،هر کس این توانایی رو در خودش میبینه که میتونه نویسنده سایت بشه،با ما در میون بزاره...

    امیدوارم از فعالیت و حضور توی سایت لذت ببرید...

    ☼ پست کده ی سه نفری ☼
    برای این پست 0 لایک ثبت شده است
    به اشتراک بزار...:
    آموزش خاصیت z-index در css

    آموزش خاصیت z-index در css

    نویسنده پست : admin
    تاریخ ارسال پست : پنجشنبه 04 ارديبهشت 1393
    ساعت ارسال پست : 7:56
    زیر موضوع : آموزش کدنویسی ,
    بازدید : 1321 بار
    نظرات این پست : نظر

    در این پست می خوام در مورد کاربرد دقیق Z-index در css و css3 توضیحاتی رو ارائه بدم...می دونم که این سوال بیشتر کاربران هستش مخصوصا تو سایت های دیگه هم این سوالاتو پرسیده بودن...فقط اول کار بگم که این خاصیت همونطور که از اسمش معلومه،به اشیای موجود در صفحه حالت 3بعدی میده،البته نه اون 3بعدی که من و شما میشناسیم...ادامه مطلب رو دنبال کن..

    مثلا ما چند تا باکس،دکمه،textarea ویا هر چیز دیگه ای داریم که همشون هم باید خاصیت (position:absolute) رو داشته باشن در این صورت ممکنه ترتیبی که ما برای اونها در نظر گرفتیم به هم بخوره و شیئی که قرار بود در بالاترین قسمت(بالاترین قسمت از نظر 3بعدی)قرار بگیره،در پایین ترین قسمت و یا در جای دیگه ای قرار میگیره!!!

    ولی با استفاده از خاصیت z-index که موقعیت اشیاء نسبت به هم رو میسنجه،ما میتونیم ترتیب قرارگیری اشیاء رو درست کنیم،مثلا اگه 4 تا باکس داشته باشیم،میتونیم با  z-index باکس دوم رو بالاتر ازهمه باکس ها قرار بدیم،به این صورت که ما میایم داخل استایلهای خودمون و به قسمت استایل او شیئی که می خواهیم روی بقیه قرار بگیره میریم و یه خاصیت به شکل زیر بهش اضافه میکنیم(مثلا):

    <style>

    .box1{background:#444; border-radius:5px; border:1px solid red; width:100px; height:100px; z-index:4;}


    .box2{background:green; border-radius:5px; border:1px solid red; width:100px; height:100px; z-index:3;}


    .box3{background:red; border-radius:5px; border:1px solid green; width:100px; height:100px; z-index:2;}


    .box4{background:#900; border-radius:5px; border:1px solid red; width:100px; height:100px; z-index:1;}

    </style>



    همونطور که میبینید ما کاری کردیم که ترتیب باکس ها بر اساس اسمشون نباشه،مثلا باکس1 بالاتر از همه قرار بگیره و باکس4 پایین تر از همه باکس ها؛


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


    برای درک بهتر موضوع به تصویر زیر نگاه کنید:




    ارسال نظر
    مرکز خرید شارژ ارزان عمده در کشور
    پیام مرکز خرید شارژ ارزان عمده در کشور در تاریخ 1395/2/31 و ساعت 12:45 به شرح زیر می باشد
    آخرشم نتونستم این سایت رو درست کنم ،
    بعضیها میان z-index رو 10000 یا 1000 میزارن !
    منظورشون از این کار چیه پس ؟
    من تست کردم وقتی اینطوری میکنیم به اولین لایه ی رویی میاد !
    اگه اینطوره پس چرا شما میگید ترتیب از یک به بالا ؟
    بعضیا -3 و -2 و -1 میزارن !!!
    این باز چیه
    لطفا کامل تر توضیح بدید
    پاسخ : خب مورد این پست رو بیشتر توضیح میدم...
    نگاه کنید...
    هر چی مقدار عددی که به z-index یه تگ یا تصویر میدین بیشتر باشه،اون تگ یا تصویر از لحاظ بعد سوم و یا سه بعدی بودن روی بقیه لایه ها قرار میگیره...
    حالا یه مثال میزنم...:
    اگه دو تا لایه به نام های شماره یک و دو داشته باشیم...
    عدد 10 رو برای z-index لایه ی شماره یک و عدد 9 رو برای z-index لایه ی دوم در نظر میگیریم...
    در نتیجه لایه دوم زیر لایه ی اول قرار میگیره...
    حتی اگه تگش بعد از تگ لایه اول اومده باشه...
    امیدوارم متوجه شده باشید...
    امیر
    پیام امیر در تاریخ 1395/2/15 و ساعت 10:30 به شرح زیر می باشد
    ممنون مقاله مفیدب یود
    پاسخ : خواهش میکنم...
    لطف دارید...
    فرهاد
    پیام فرهاد در تاریخ 1394/5/21 و ساعت 10:34 به شرح زیر می باشد
    در واقع میشه گفت z-index لایه گذاری می کنه عناصر رو.

    پیام در تاریخ 1394/5/16 و ساعت 18:28 به شرح زیر می باشد
    تصاویر فیلتر باید شن :دی
    مثال بهتر نبود ؟؟؟؟؟!؟!؟؟!
    حتما باید از قمار استفاده میکردی :دی

    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتی

    ☼ تبادل کده سه نفری ☼
    تبلیغات کانالی

    ارسال اطلاعات کانال جهت تبلیغ
    ارسال پست

    من به عنوان مدیر سه نفری یه چیزی اومد تو ذهنم...

    اونم اینکه هر کسی توی ذهنش یا گوشه کامپیوترش،یه سری کد و بازی و در کل مطلب داره...

    خب حیفه این استعدادها از بین برن،شاید حتی کوچکترین کد شما که به نظرتون به درد نخوره...

    به درد یکی بخوره و بتونه ازش استفاده کنه...

    پس اگه از اون دست آدمایید که همیشه یه چیز برای بقیه دارید تا رو کنید...

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

    همین حالا امتحان کنید،فرستادن از شما،تایید از ما...

    نمایش فرم ارسال فقط برای اعضای سایت امکان پذیر است...!!