position در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش position در CSS با من همراه باشید.

با استفاده از ویژگی position در CSS می توان موقعیت ( پوزِیشن ) / Position یا محل قرار گیری یک عنصر را در صفحه مشخص و یا تعریف کرد.

از طریق این ویژگی می توانید تصمیم بگیرید که آیا مکان عنصر نسبت به flow صفحه مشخص شود (حالت پیشفرض) یا اینکه در عین حالی که جایگاهش در flow حفظ می شود مکانش تغییر کند و یا اینکه مکان آن را نسبت به یکی از عناصر اجدادش مشخص کنید. همینطور می توانید تغییر مکان را نسبت به viewport انجام دهید.

که این موقعیت یا پوزیشن میتواند یکی از موارد زیر باشد :

• Absolute : موقعیت ثابت به نسبت عنصر پدرش
• Fixed : موقعیت فیکس در همه حال
• Relative : موقعیت نسبی نسبت به محل اولیه عنصر
• Sticky : موقعیت چسبیده

flow

زمانی که عناصر بصورت عادی در زیر هم چیده می شوند اگر عنصر بالایی را حذف کنیم تمام عناصر به سمت بالا جابجا می شوند. و یا اگر عناصری در کنار هم چیده شده باشند اگر عنصری را از اول لیست حذف کنیم عناصر دیگر جابجا می شوند و مکان خالی را پر می کنند. یا اینکه اگر به عنصری margin بدهیم باعث می شود تا مکان عناصر اطراف آن تغییر کند. این نشان می دهد که عناصر در یک جریان (flow) یکسان قرار دارند و به نوعی به هم تکیه داده اند و به هم متصل هستند و در یک لایه زندگی می کنند.

زمانی که گفته می شود عنصری را از flow صفحه خارج می کنیم, منظور این است که اگر عنصر از این به بعد جابجا شود تکان خوردن آن تاثیری بر دیگر عناصر و مکان آنها نخواهد گذاشت.

viewport

قابی است که می توانید از طریق آن قسمتی از یک سند وب را در لحظه مشاهده کنید, از طریق اسکرول می توان Viewport را جابجا کرد تا بقیه محتوای صفحه قابل نمایش باشند.

در حالت پیشفرض تمام عناصر بصورت static در صفحه جای گرفته اند. این بدین معنی است که عنصر در جریان یا همان flow عادی صفحه قرار دارد. زمانی که گفته می شود برای عنصری position تعیین شده است منظور این است که مقدار ویژگی position آن از static به یکی از چهار مقدار sticky, fixed ,absolute ,relative تغییر کرده است.

دو مقدار دیگر هم اخیرا برای این ویژگی در CSS3 در نظر گرفته شده اند و آنها page و center می باشند. که البته این دو مقدار به همراه مقدار sticky از نظر پشتیبانی مرورگرها هنوز در شرایطی نیستند که مورد استفاده قرار بگیرند.

زمانی که از مقادیری به غیر از static برای یک عنصر استفاده شود, می توان مکان عنصر را با استفاده از ویژگی های right ,left, bottomو top تعیین کرد.

این تعیین مکان نسبت به یک سیستم مختصاتی خاص صورت می گیرد که آن سیستم مختصات با توجه به مقادیر مختلفی که ویژگی position می گیرد, متفاوت خواهد بود.

در ادامه مقادیر این ویژگی را بررسی شده اند:

relative

اگر این مقدار برای یک عنصر تعیین شود دو اتفاق می افتد:

۱٫ عنصر یک سیستم مختصات برای آن دسته از فرزندانش که دارای position: absolute هستند, فراهم می کند.
۲٫ یک سیستم مختصات هم برای خودش تعیین می کند.

این بدین معنی است که می توانید عنصر را با استفاده از ویژگی top و left و غیره جابجا کنید. نقطه مبدا مختصات همان مکان اولیه است که عنصر جای دارد.

از تصویر بالا دو نکته در مورد حالت relative دریافت می شود:

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

absolute

زمانی که از این حالت برای یک عنصر استفاده می شود, می توان عنصر را نسبت به عنصری از اجدادش جابجا و مکانش را تعیین کرد. همینطور دو اتفاقی که برای حالت relative می افتد برای این حالت نیز بوجود می آید, یعنی:

۱٫ عنصر یک سیستم مختصات برای آن دسته از فرزندانش که دارای position: absolute هستند, فراهم می کند.
۲٫ یک سیستم مختصات هم برای خودش تعیین می کند.

دو تفاوت بین absolute و relative وجود دارد:

اول اینکه زمانی که عنصر در حالت absolute باشد, جابجا شدن عنصر نسبت به اولین پدری از اجدادش که حالت relative دارد انجام می شود. و مختصات آن هم نقطه صفر top و left عنصر پدر می باشد. اما وقتی عنصر در حالت relative است جابجا شدن آن نسبت به حالت اولیه خود عنصر است و مستقل از عناصر پدرش می باشد.

( اینکه که می گوییم عنصر نسبت به اولین پدری از اجدادش که حالت relative دارد مختصات می پذیرد منظور این است که عنصر absolute به پدرش نگاه می کند اگر relative یا absolute یا fixed بود نسبت به آن مکان خود را مشخص می کند, اما اگر هیچ یک از این حالات را نداشت به عنصر پدر بزرگش رجوع می کند اگر آن هم نداشت همانطور به به سمت بالا حرکت می کند تا به یک عنصر با این حالت برسد اگر در نهایت هیچ عنصری یکی از این حالت ها را نداشت یعنی حتی html و body هم این حالات را نداشتند نسبت به صفحه مکان عنصر تعیین می شود. )

نا گفته نماند تا زمانی که برای عنصر مختصات بوسیله top و left و غیره تعیین نشود عنصر از flow خارج خواهد شد اما در همان مکان قبلیش باقی خواهند ماند.

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

تصویر زیر حالت عادی یا همان حالت static عنصر را نشان می دهد:

اما این تصویر زمانی است که عنصر بوسیله مقدار absolute تعیین مکان شده است:

در تصویر بالا عنصر صورتی رنگ نسبت به عنصری که حاشیه خاکستری دارد تعیین مکان شده است و کد بصورت زیر می باشد:

.container {
  position: relative;
}

.element {
  position: absolute;
  top: 30px;
  right: 40px;
}

fixed

این حالت کاملا مشابه به حالت absolute می باشد یعنی عنصر در flow خارج می شود اما تفاوت این حالت در این است که عنصر بجای آنکه نسبت به یک عنصر از اجدادش تعیین مکان شود, نسبت به viewport مکانش مشخص می شود. و نکته دیگر اینکه در آن مکان در هر حالتی ثابت می ماند و حتی اسکرول کردن صفحه روی آن تاثیری نخواهد گذاشت.

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

sticky

این حالت مخلوطی از حالت relative و fixed می باشد. عنصر شبیه به حالت relative رفتار می کند تا وقتی که به یک نقطه از اسکرول برسد. سپس بلافاصله رفتارش به حالت fixed تبدیل می شود. کد زیر را در نظر بگیرید:

.element {
  position: sticky;
  top: 20px;
}

در اینجا عنصر در هر کجا که باشد تا زمانی که اسکرول باعث نشود تا فاصله آن از بالای صفحه بعد ۲۰ پیکسل برسد رفتار relative خواهد داشت اما به محض اینکه فاصله آن در زمان اسکرول به ۲۰ پیکسلی بالای صفحه برسد در همان فاصله از بالای صفحه ثابت خواهد ماند. در دموی زیر این رفتار توسط جاوااسکریپت طراحی شده است اما به محض اینکه پشتیبانی این رفتار در مرورگرها به حالت امنی برسد می توانید به راحتی از CSS برای پیاده سازی این حالت استفاده کنید.

center

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

این حالت مثل حالت absolute عنصر را از flow خارج می کند و این عنصر دیگر تاثیری بر عناصر دیگر نخواهد داشت.

نکات مهم

زمانی که عنصری در حالت absolute باشد, عرض آن به مقدار محتوای داخل آن خواهد بود (دقیقا مثل زمانی که از display: table برای یک عنصر استفاده می کنیم, یعنی عرض عنصر حداقل می شود). برای اینکه عنصر را مجبور شود تا تمام عرض نگهدارنده اش را پر کند دو راه وجود دارد. یک اینکه می توانید با استفاده از ویژگی wdith عرض برای عنصر تعیین کنید. مثلا %۱۰۰. دوم اینکه به صورت زیر عمل کنید:

.element {
 position: absolute;
 left: 0; right: 0; 
}

همینطور اگر می خواهید عنصری که حالت absolute دارد از لحاظ عمودی کاملا کشیده شود نیز می توانید بصورت زیر عمل کنید:

.element {
  position: absolute;
  top: 0;
  bottom: 0;
}

اگر برای عنصری در این حالت height مشخص شود و همینطور top و bottom تعیین گردد: top تعیین کننده مکان عنصر خواهد بود و برنده مسابقه خواهد شد.

اگر width برای عنصر تعیین شود و همینطور دو مقدار left و right را داشته باشیم, اگر جهت صفحه چپ به راست باشد left تعیین کننده مکان عنصر خواهد بود و اگر جهت صفحه راست به چپ (rtl) باشد, right برنده خواهد بود.

نکته دیگر اینکه عناصر در حالت fixed همیشه ثابت نسبت به viewport هستند مگر اینکه یکی از عناصر پدرشان وارد بازی transform شود. در این صورت عنصر fixed نسبت به آن عنصر پدر جای می گیرد و با اسکرول نیز حرکت می کند.

امیدواریم آموزش position در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.