position

با استفاده از ویژگی position می توان مکان یک عنصر را در صفحه مشخص کرد.

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

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

 

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

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

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

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

 
position relative در css
 

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

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

 

absolute

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

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

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

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

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

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

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

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

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

استفاده از مقدار absolute
 

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

 


.container {
  position: relative;
}

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

 

 

fixed

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

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

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

 

See the Pen position: fixed; by Mojtaba Seyedi (@seyedi) on CodePen.


 

sticky

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

 


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

 

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

See the Pen KzoOqG by Mojtaba Seyedi (@seyedi) on CodePen.


 

 

center

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

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

 

page

هنوز رفتار دقیق این حالت کاملا مشخص نیست! ( ولی باید چیز خوبی از کار در بیاد :) )

 

نکات مهم

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

 


.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 بهتر آشنا شوید:
 

See the Pen position by Mojtaba Seyedi (@seyedi) on CodePen.


 

 

پشتیبانی مرورگر ها

ویژگی position در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر, اندروید و iOS پشتیبانی می شود. اما وقتی مقدار fixed را دارد در برخی مرورگرها باید مراقب بود:

 
همینطور پشتیبانی حالت sticky در جدول زیر تعیین شده است:

 
و حالت های page و center فعلا در هیچ مرورگری پشتیبانی نمی شوند.

7 دیدگاه برای “position

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

  2. سلام
    به خاطر آموزش خوبتون بهتون خدا قوت میگم…
    من یه مشکل اساسی با relative و absolute دارم.اگه بخوام سایتی طراحی کنم و از این position ها استفاده کنم آیا میتونم فقط از یکی از اونا استفاده کنم؟منظورم اینه که مثلاً اگه بخوام یک باکس رو به قسمتی از صفحه ببرم میتونم فقط از حالت relative استفاده کنم؟آخه همون کاری رو که absolute انجام میده با relative هم میشه انجامش داد پس چه نیازی هست که اصلاً دوتاش رو یاد بگیریم؟

    1. سلام ممنونم از پیامتون.

      نه این دو با هم فرق دارند.

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

      موفق باشید.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *