آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

Position در CSS

CSS

فصل چهارم : Properties در CSS

جلسه دهم  : Position در CSS

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

دوستان در این جلسه ی آموزشی میخوام راجع به Position ها ,right , left , top , bottom و z-index صحبت کنم .

 

خاصیت  Position

گاهی اوقات شما احتیاج دارید که یک عنصر رو در یک مکان قرار بدید و اون رو از نظر موقعیت بصورت پیکسلی تنظیم کنید . یا نیاز دارید چند لایه یا عنصر رو روی هم قرار بدید که در این مواقع از خاصیت  position استفاده می کنید . زمانی که از position استفاده می کنید میتونید توسط خاصیت های right , left , top , bottom عنصر رو در موقعیت های راست ، چپ ، بالا ، پایین تنظیم کنید .

 

مقادیر خاصیت Position

برای خاصیت  position شما میتونید از مقادیر زیر استفاده کنید :

Static : مقدار پیشفرض position هست و زمانی که بخواین یک position رو خنثی کنید اون رو برابر با static قرار میدید .

Relative : زمانی که بخواین خاصیت های right , left , top , bottom رو بکار ببرید از این مقدار استفاده می کنید ، همچنین این مقدار رو برای عنصر والدِ عنصر فرزندی قرار میدید که مقدار position اون عنصر فرزند absolute باشه . حالا در مثال هایی که میزنیم بهتر متوجه میشید .

Absolute : زمانی که از این مقدار استفاده می کنید ، عنصر در گوشه ی کادر عنصر والد قرار میگیره ( عنصر والدی که مقدار relative رو داشته باشه ) در صورتی که عناصر والد اون خاصیت position و یا مقدار relative رو نداشته باشند ، عنصر مورد نظر body رو عنصر والد در نظر میگیره و گوشه ی کادر صفحه قرار میگیره . همچنین عنصری که مقدار absolute رو داره روی همه ی عناصر قرار میگیره . اگر چند عنصر این مقدار رو داشته باشند با z-index ترتیب قرارگیری عناصر روی هم رو تعیین می کنید .

Fixed : اگر بخواین یک عنصر رو بصورت ثابت در صفحه قرار بدید از این مقدار استفاده می کنید . این عنصر نسبت به پنجره ی مرورگر ثابت قرار میگیره ؛ حتی با اسکرول صفحه هم عنصر حرکت نمیکنه و ثابت باقی میمونه .

Initial : مقدار پیشفرض رو در نظر میگیره .

Inherit : مقدار عنصر والد رو به عنصر فرزند اختصاص میده ، مثلا اگر عنصر والد مقدار absolute داشته باشه ، عنصر فرزند هم مقدار inherit داشته باشه ، مقدار absolute رو از عنصر والد به ارث میبره .

 

خاصیت های Top , Right , Bottom , Left

در صورتی که بخواین این خاصیت ها رو بکار ببرید ، حتما باید خاصیت position رو استفاده کنید . برای کار با این خاصیت ها بصورت معمولی از position با مقدار  relative استفاده می کنیم .

Top: فاصله ی عنصر رو از بالا تنظیم می کنه که می تونید از مقیاس px , % و … استفاده کنید .

Right : فاصله ی عنصر رو از راست تنظیم می کنه که می تونید از مقیاس px , % و … استفاده کنید .

Bottom : فاصله ی عنصر رو از پایین تنظیم می کنه که می تونید از مقیاس px , % و … استفاده کنید .

Left  : فاصله ی عنصر رو از چپ تنظیم می کنه که می تونید از مقیاس px , % و … استفاده کنید .

 

خاصیت Z-index

زمانی که چند لایه رو روی هم قرار میدید ، برای ترتیب قرارگیری این لایه ها روی هم از z-index استفاده می کنید .

 

برای درک بهتر به کد CSS زیر دقت کنید :

کد html :

در این کد ما یه کادر صورتی به عنوان body در نظر گرفتیم که عملیات رو به خوبی درک کنید . در این کادر ما یک باکس بنام div1 در نظر گرفتیم که برای اینکه بتونیم با خاصیت های top و  left  کار کنیم position با مقدار relative بهش دادیم . رنگ این باکس رو آبی در نظر گرفتیم و ۲۰ پیکسل از بالا و ۲۰ پیکسل از سمت چپ فاصله ایجاد کردیم . نتیجه ی این کد رو میتونید مشاهده کنید :

1

خوب حالا ما میخوایم یه باکس دیگه داخل این باکس آبی تعریف کنیم به عنوان عنصر فرزند . حالا اگر بخوایم این عنصر فرزند رو نسبت به باکس آبی (عنصر والد) موقعیت دهی کنیم . باید به عنصر فرزند مقدار absolute بدیم . به کد زیر دقت کنید :

کد html :

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

2

خوب حالا ما میخوایم دو لایه روی هم قرار بدیم . مثلا یه باکس قرمز رنگ رو زیر باکس زرد قرار بدیم . در این حالت هم چون باکس قرمز رنگ عنصر فرزند باکس آبی رنگه باید مقدار absolute بهش بدیم . برای اینکه بتونیم باکس قرمز رنگ رو زیر باکس زرد قرار بدیم یعنی دو لایه رو روی هم قرار بدیم باید از z-index استفاده کنیم . به کد زیر دقت کنید :

کد html :

به کد css دقت کنید ، به باکس زرد رنگ z-index با مقدار ۱۰ میدیم و به باکس قرمز z-index با مقدار ۱ میدیم . در این صورت باکس زرد رنگ روی باکس قرمز قرار میگیره . نتیجه میگیریم هر باکسی که بخوایم روی باکس های دیگه قرار بگیره به ترتیب باید z-index شون رو بیشتر در نظر بگیریم . مثلا z-index با مقدار ۱۰ روی z-index با مقدار ۱ قرار گرفت چون مقدارش بیشتر بود . نتیجه ی کد بالا :

3

حالا میایم جای این باکس هارو تغییر میدیم ، باکس زرد رو میبریم زیر باکس قرمز . برای اینکار باید چیکار کنیم؟ باید z-index باکس قرمز رو بیشتر از باکس زرد کنیم .

نتیجه :

4

خوب فکر می کنم دیگه به خوبی این مقادیر رو یاد گرفته باشید . حالا اگر شرایطی براتون پیش بیاد که مجبور باشید روی یک css از پیش تعریف شده استایل مجدد تعریف کنید ، و بخواین position عنصر رو خنثی کنید به اون عنصر مقدار static میدید . اینطوری دیگه position خاصیتی نداره و هیچ کاری انجام نمیده .

در رابطه با مقدار fixed هم یک نمونه در پوشه ی پروژه قرار میدم که میتونید در انتهای جلسه دانلود کنید و مشاهده کنید . از این مقدار زمانی استفاده می کنید که بخواین یک عنصر رو نسبت به صفحه ی مرورگر ثابت نگه دارید و حتی با اسکرول خوردن صفحه هم این عنصر حرکت نداشته باشه . بیشتر برای مواردی مثل منوهای ثابت یا تبلیغات گوشه ی صفحه استفاده میشه  .

 

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

موفق باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • امین

    ببخشید ، من متوجه نشدم Z-index رو بر چه اساس باید مقدار دهی کنیم؟
    مثلا چرا باکس رویی ۱۰ باشه و پایینی ۱؟

    • میترا رحیمی

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

  • hassani

    اگه بخوایم یه عنصر رو نسبت به والدش موقعیت دهی کنیم کافیه والدش خاصیت relative یا absolute داشته باشه و به خودش هم خاصیت absolute بدیم.اگه بخوایم عنصر رو طبق جایگاهش در کدهای html موقعیت دهی کنیم از relative و اگه بخوایم نسبت به عنصر والد یا کل صفحه موقعیت دهی بشه از absolute استفاده میکنیم.
    درست متوجه شدم؟
    ممنونم

    • میترا رحیمی

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

  • محسن

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

  • علیرضا کریمی نژاد

    کاملا تمیز و شیک و مجلسی توضیح دادید
    ممنون

  • iman

    با عرض سلام
    فرض کنید دو دایو در صفحه داریم و یکی از این دایوها درون دایو دیگری قرار دارد و هر دو پوزیشن relative دارند
    ۱- دایو اول براساس body سنجیده میشه ؟؟؟
    ۲-دایو دوم بر چه اساسی مقدار میگیره ؟؟؟ دایو والد یا body ??

  • امیربهادر

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

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟