کُد کمپ رایگان #C رو تو پیج اینستاگرام atriya.com دنبال کن!

آموزش طراحی سایت - Position در CSS

در این بخش از آموزش طراحی سایت به آموزش مشخصه Position در CSS و موقعیت دهی به عناصر در CSS می پردازیم.

در طراحی سایت و صفحات وب، با استفاده از ویژگی position می توانیم موقعیت مکانی و شیوه قرارگیری یک عنصر در صفحه را تعیین کنیم. این موقعیت ها می توانند بصورت (static, relative, fixed absolute, sticky) باشند.

آموزش طراحی سایت

ویژگی position

برای ویژگی position پنج مقدار موقعیت دهی وجود دارد: (انواع شیوه های قرارگیری عناصر)

  • Static (ایستا)
  • Relative (نسبی)
  • Fixed (ثابت)
  • Absolute (مطلق)
  • Sticky (چسبنده)

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


مقدار static برای position (موقعیت ایستا)

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

آموزش طراحی سایت

در کد بالا مقدار ویژگی position برابر با static قرار داده شده است. همانظور که گفته شد، مقدار ویژگی position به صورت پیشفرض static در نظر گرفته می شود. بنابراین مشاهده می کنید که تغییر خاصی در نحوه قرارگیری عنصر div اعمال نشده است. نتیجه کد بالا به صورت زیر است:

آموزش position در alt=

مقدار relative برای position (موقعیت نسبی)

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

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

در این مثال ویژگی position برای عنصر div برابر با مقدار relative در نظر گرفته شده است. سپس با استفاده از ویژگی left به آن فاصله 30px از چپ داده شده است. همانطور که در نتیجه کد مشاهده می کنید، این عنصر به شکل زیر تغییر موقعیت داده است:

آموزش CSS

مقدار fixed برای position (موقعیت ثابت)

عنصری با position: fixed، نسبت به viewport موقعیت دهی می شود؛(viewport ناحیه ای از صفحه است که توسط صفحه نمایش قابل مشاهده است.) این به این معنا است که عنصر حتی با اسکرول کردن جایگاهش تغییری نمی کند. مشخصه های top, right, bottom و left برای تغییر موقعیت مکانی عنصر استفاده می شوند. عنصر fixed فاصله ای را در صفحه ای که قرار می گیرد به جای نمی گذارد.

آموزش طراحی سایت

در این مثال، ویژگی position در عنصر div با کلاس fixed برابر با مقدار fixed در نظر گفته شده است و با استفاده از ویژگی های bottom و right که هر دو مقدار 0 را دریافت کرده اند، به گوشه پایین سمت راست انتقال داده شده است. این عنصر به پایین ترین و راست ترین نقطه صفحه منتقل شده است. در زیر می توانید نتیجه کد بالا را مشاهده فرمایید:

آموزش position در alt=


مقدار absolute برای position (موقعیت مطلق)

اگر ویژگی position را برابر با absolute قرار دهیم یعنی می خواهیم تگ مورد نظر را نسبت به تگ های html والد آن عنصر، موقعیت دهی کنیم. یک عنصر که position: absolute داشته باشد، نسبت به نزدیک ترین والد خود موقعیت دهی می شود. به هر حال، اگر یک عنصر که position: absolute داشته باشد و هیچ والدی نداشته باشد، موقعیت آن نسبت به body سنجیده می شود.

یک مثال ساده:

آموزش CSS

در این مثال 2 عنصر div درون هم قرار گرفته اند که عنصر والد position: relative و عنصر درون آن position: absolute گرفته است. همانطور که در تصویر مشاهده می کنید، عنصر absolute، درون والد خود جابجا می شود و موقعیت مکانی آن با استفاده از ویژگی های top, right, bottom و left تغییر می کند. در واقع این عنصر نسبت به والد خود تغییر موقیت مکانی را تجربه می کند. در طراحی سایت و صفحات وب، ترکیب relative و absolute بسیار کاربردی است.

آموزش طراحی سایت

مقدار sticky برای position (چسبنده)

عنصری با position: sticky موقعیتش براساس موقعیت اسکرول کاربر تعیین می شود. یعنی به این صورت که عنصر در هنگام اسکرول شدن به بالای صفحه متصل می شود و مکانش نسبت به اسکرول تغییر می کند.

آموزش موقعیت دهی عناصر در css


در این مثال، عنصر که position: sticky را دارد، در سر جای خود باقی می ماند تا پس از حرکت اسکرول کاربر، زمانی که فاصله عنصر از بالای صفحه به صفر رسید (top: 0) این عنصر دیگر به بالای صفحه می چسبد و پایین می آید. مقدار top دست خودمان است و می توانید به عنوان مثال عدد 10px را برای آن قرار دهیم. در زیر نتیجه کد را مشاهده می کنید:

آموزش CSS

آموزش موقعیت دهی به عناصر در css


Overlapping Elements (روی هم قرار گرفتن عناصر)

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

آموزش position در css

در این مثال با قرار دارد مقدار z-index روی -1، موقعیت تصویر زیر متن تنظیم شده است.

آموزش css

حال برای تغییر این ترتیب و اولویت به مثال زیر دقت کنید:

آموزش موقعیت دهی به عناصر در css

در این مثال، مقدار z-index تغییر کرده و برابر با 1 درنظر گرفته شده است که اولویت آن را نسبت به متن بالاتر قرار می دهد و تصویر باید روی متن قرار گیرد. در زیر می توانید نتیجه کد بالا را مشاهده کنید:

آموزش CSS


قرار دادن متن روی تصویر در طراحی سایت

قرار دادن متن روی تصاویر در طراحی سایت بسیار مهم است و ممکن است شما را با چالش هایی روبرو کند. در زیر با 2 مثال این بخش را به شما آموزش می دهیم:

آموزش طراحی سایت

در این مثال متن درون container در بالا سمت چپ عکس قرار گرفته است:

آموزش موقعیت دهی به عناصر در css

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

آموزش موقعیت دهی به عناصر در css

در این مثال متن درون container در وسط عکس قرار گرفته است:

آموزش طراحی سایت

تمام ویژگی های موقعیت دهی در CSS به صورت خلاصه در جدول زیر بیان شده است:

آموزش CSS

آموزش طراحی سایت آموزش طراحی وبسایت آموزش CSS آموزش Position در css آموزش موقعیت دهی به عناصر در css ویژگی position در css

مقالات این دسته بندی