تایپ سریع فرمول‌های ریاضی در Word

تایپ سریع فرمول‌های ریاضی در Word

ادامه مطلب
آموزش نتورک پلاس (جلسه اول)

آموزش نتورک پلاس (جلسه اول)

ادامه مطلب
آموزش نصب بی نهایت تلگرام در کامپیوتر

آموزش نصب بی نهایت تلگرام در کامپیوتر

ادامه مطلب
برنامه گرفتن اسکرین شات از صفحه به دو صورت پرتابل و نصبی

برنامه گرفتن اسکرین شات از صفحه به دو صورت پرتابل و نصبی

ادامه مطلب
رفع مشکل پنهان شدن فایل های USB

رفع مشکل پنهان شدن فایل های USB

ادامه مطلب
آموزش برنامه نویسی سی شارپ (مقدمه)

آموزش برنامه نویسی سی شارپ (مقدمه)

ادامه مطلب
کد نمایش آخرین ارسالی های انجمن در صفحات جداگانه

کد نمایش آخرین ارسالی های انجمن در صفحات جداگانه

ادامه مطلب
قالب لایه  باز تفریحی

قالب لایه باز تفریحی

ادامه مطلب
ابزار پرسش نام و سن از کاربر و جواب های خنده دار - ورژن 2

ابزار پرسش نام و سن از کاربر و جواب های خنده دار - ورژن 2

ادامه مطلب
قالب لایه باز برای رزبلاگ - مدل اول

قالب لایه باز برای رزبلاگ - مدل اول

ادامه مطلب

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

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

در این پست می خوام در مورد کاربرد دقیق 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 هیچ واحدی ندارد..!


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



کامنت ها
: مرکز خرید شارژ ارزان عمده در کشور 6 سال پیش

آخرشم نتونستم این سایت رو درست کنم ،
بعضیها میان z-index رو 10000 یا 1000 میزارن !
منظورشون از این کار چیه پس ؟
من تست کردم وقتی اینطوری میکنیم به اولین لایه ی رویی میاد !
اگه اینطوره پس چرا شما میگید ترتیب از یک به بالا ؟
بعضیا -3 و -2 و -1 میزارن !!!
این باز چیه
لطفا کامل تر توضیح بدید

پاسخ : خب مورد این پست رو بیشتر توضیح میدم...
نگاه کنید...
هر چی مقدار عددی که به z-index یه تگ یا تصویر میدین بیشتر باشه،اون تگ یا تصویر از لحاظ بعد سوم و یا سه بعدی بودن روی بقیه لایه ها قرار میگیره...
حالا یه مثال میزنم...:
اگه دو تا لایه به نام های شماره یک و دو داشته باشیم...
عدد 10 رو برای z-index لایه ی شماره یک و عدد 9 رو برای z-index لایه ی دوم در نظر میگیریم...
در نتیجه لایه دوم زیر لایه ی اول قرار میگیره...
حتی اگه تگش بعد از تگ لایه اول اومده باشه...
امیدوارم متوجه شده باشید...

: امیر 6 سال پیش

ممنون مقاله مفیدب یود

پاسخ : خواهش میکنم...
لطف دارید...

: - 7 سال پیش

در واقع میشه گفت z-index لایه گذاری می کنه عناصر رو.

: 7 سال پیش

تصاویر فیلتر باید شن :دی
مثال بهتر نبود ؟؟؟؟؟!؟!؟؟!
حتما باید از قمار استفاده میکردی :دی

تایپ سریع فرمول‌های ریاضی در Word

تایپ سریع فرمول‌های ریاضی در Word

ادامه مطلب
آموزش نتورک پلاس (جلسه اول)

آموزش نتورک پلاس (جلسه اول)

ادامه مطلب
آموزش نصب بی نهایت تلگرام در کامپیوتر

آموزش نصب بی نهایت تلگرام در کامپیوتر

ادامه مطلب
برنامه گرفتن اسکرین شات از صفحه به دو صورت پرتابل و نصبی

برنامه گرفتن اسکرین شات از صفحه به دو صورت پرتابل و نصبی

ادامه مطلب
رفع مشکل پنهان شدن فایل های USB

رفع مشکل پنهان شدن فایل های USB

ادامه مطلب
آموزش برنامه نویسی سی شارپ (مقدمه)

آموزش برنامه نویسی سی شارپ (مقدمه)

ادامه مطلب
کد نمایش آخرین ارسالی های انجمن در صفحات جداگانه

کد نمایش آخرین ارسالی های انجمن در صفحات جداگانه

ادامه مطلب
قالب لایه  باز تفریحی

قالب لایه باز تفریحی

ادامه مطلب
ابزار پرسش نام و سن از کاربر و جواب های خنده دار - ورژن 2

ابزار پرسش نام و سن از کاربر و جواب های خنده دار - ورژن 2

ادامه مطلب
قالب لایه باز برای رزبلاگ - مدل اول

قالب لایه باز برای رزبلاگ - مدل اول

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