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