با بهره بری و استفاده از ویژگی 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

در صورتی که آن مقدار جهت یک عنصر مشخص کردن می شود دو اتفاق می افتد:

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

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

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

sticky

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

.element 
position: sticky;
top: 20px;

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

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

center

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

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

page

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

موارد و نکات مهم

زمانی که عنصری در حالت 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 بهتر آشنا شوید:
 

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

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

ویژگی position در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر, آندروید و همچنین iOS پشتیبانی می می شود. ولی باید توجه داشت هنگام و زمانی که مقدار fixed را دارد در بعضی مرورگرها بایستی و حتما مراقب بود:

 
همینطور پشتیبانی حالت sticky در جدول زیر مشخص کردن شده می باشد:

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