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

Position در CSS

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

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 هم یک نمونه در پوشه ی پروژه قرار میدم که میتونید در انتهای جلسه دانلود کنید و مشاهده کنید . از این مقدار زمانی استفاده می کنید که بخواین یک عنصر رو نسبت به صفحه ی مرورگر ثابت نگه دارید و حتی با اسکرول خوردن صفحه هم این عنصر حرکت نداشته باشه . بیشتر برای مواردی مثل منوهای ثابت یا تبلیغات گوشه ی صفحه استفاده میشه  .

 

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

موفق باشید 🙂

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

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۱۰

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

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

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

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

  • یه سوالی داشتم خواستم بدونم باید چیکار کنیم که height والد به اندازه جایگاه absolute ما کش بیاد ؟؟؟

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

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

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

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

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