اگه هنوز با خصوصیت Position در CSS عمیقاً آشنا نیستید این مقاله رو بخونید!

سلام دوستان...

دارم اولین پست ویرگولم رو می‌نویسم؛ خیلی انگیزه دارم و امیدوارم که براتون مفید باشه.

خب همونطور که می‌دونید قصد دارم تا در این پست خصوصیت Position در CSS رو به طور کامل براتون توضیح بدم. و پیشنهاد می‌کنم بعد از خوندن این مقاله دست به کد شین و مثال‌هارو به صورت عملی اجرا کنید تا نتیجه براتون بیشتر قابل درک باشه.

ما با استفاده از خصوصیت Position می‌تونیم مکان یک عنصر رو در صفحه مشخص کنیم، که خب بسته به مقداری که این خصوصیت میگیره می‌تونه حالت‌های مختلفی داشته باشه. به طور کلی خصوصیت Position پنج تا Value متفاوت می‌گیره که عبارتند از:

1. Static
2. Relative
3. Absolute
4. Fixed
5. Sticky

بعد ازینکه هرکدوم ازین مقادیر رو برای Propertyمون Set کردیم، می‌تونیم از خصوصیات Left, Right, Top و Bottom هم برای اعمال تنظیمات بیشتر استفاده کنیم.

اولین مقدار ;Position: Static

به طور پیش‌فرض خصوصیت Position تمامی عناصر در HTML مقدار Static داره. یعنی اگر Position رو برابر با Static قرار بدین اتفاق خاصی نمیفته و موقعیت عنصر همچنان در همون جریان یا Flow عادی صفحه قرار خواهد داشت. به این نکته هم توجه کنید که وقتی خصوصیت Position مقدار Static داشته باشه دیگه Set کردن مقادیر Top, Right, Left و Bottom تاثیری در تغییر موقعیت عنصر نخواهند داشت.

index.html

<div class=&quotparent&quot>
  <div class=&quotourBox&quot id=&quotfirstBox&quot>One</div> 
  <div class=&quotourBox&quot id=&quotsecondBox&quot>Two</div> 
  <div class=&quotourBox&quot id=&quotthirdBox&quot>Three</div> 
  <div class=&quotourBox&quot id=&quotfourthBox&quot>Four</div>
</div>

style.css

.parent {
  border: 2px black dotted;
  display: inline-block;
}
.ourBox {
  display: inline-block;
  background: #cdcdcf;
  width: 100px;
  height: 100px;
}
#secondBox {
  position: static;  /*default value*/
  background: #254de3;
  color: white;
}

Try it yourself: https://codepen.io/shadi-shirinbeik/pen/ZEGdabp

دومین مقدار ;Position: Relative

اگه به خصوصیت position عنصری مقدار relative بدیم می‌تونیم این عنصر رو با استفاده از porpertyهای Top, Left, Right و Bottom جابجا کنیم. به این صورت که جایگاه این عنصر در Flow مثل گذشته حفظ میشه و عنصر دیگه‌ای نمی‌تونه جاشو پر کنه. اما نسبت به موقعیت فعلی خودش جابجا میشه. نکته مهمی که اینجا وجود داره اینکه این جابجایی تاثیری بر روی عناصر مجاور نخواهد داشت.

style.css

.parent {
  border: 2px black dotted;
  display: inline-block;
}
.ourBox {
  display: inline-block;
  background: #cdcdcf;
  width: 100px;
  height: 100px;
}
#secondBox {
  position: relative;
  top: 25px;
  left: 25px;
  background: #254de3;
  color: white;
}

Try it yourself: https://codepen.io/shadi-shirinbeik/pen/eYNweBv

سومین مقدار ;Position: Absolute

این حالت نیز از یه لحاظی مشابه حالت قبلی هست. اونم اینکه می‌تونیم عنصر رو با استفاده از چهار خصوصیت Top, Left, right و Bottom جابجا کنیم. اما تفاوت اینجاست که این جابجایی نسبت به Parent عنصر اتفاق میفته و در حقیقت عنصر از Flow نرمالش خارج میشه و عنصر بعدی جای اون رو پر میکنه. بنابراین عنصری که دارای مقدار Absolute هست به Parent خودش نگاه میکنه و با توجه به Positionای که پدرش داره مکان فعلی خودش رو مشخص میکنه. اگر برای عنصر پدر Positionای Set نشده بود به عنصر پدربزرگش رجوع میکنه و همینطور به سمت بالا... (در اینجا Parent عنصر ما عنصر دایو با کلاس parent هست.)

style.css

.parent {
  position: relative;
  border: 2px black dotted;
  display: inline-block;
}
.ourBox {
  display: inline-block;
  background: #cdcdcf;
  width: 100px;
  height: 100px;
}
#secondBox {
  position: absolute;
  top: 25px;
  left: 25px;
  background: #254de3;
  color: white;
}

Try it: https://codepen.io/shadi-shirinbeik/pen/BaNgJoL

چهارمین مقدار ;Position: Fixed

حالا که راجع به Absolute می‌دونیم، درک Fixed برامون خیلی راحته. در این حالت هم عنصر از Flow خارج میشه ولی این بار بجای Parent، موقعیت مکانیش نسبت به Viewport مشخص میشه. لذا عنصر همیشه در یک مکان ثابت قرار داره و حتی اگه صفحه اسکرول بخوره، بازهم موقعیت مکانی عنصر تغییری نمی‌کنه.

style.css

.parent {
  margin-top: 40px;
  margin-left: 40px;
  border: 2px black dotted;
  display: inline-block;
}
.ourBox {
  display: inline-block;
  background: #cdcdcf;
  width: 100px;
  height: 100px;
}
#secondBox {
  position: fixed;
  top: 0px;
  left: 0px;
  background: #254de3;
  color: white;
}

Try it yourself: https://codepen.io/shadi-shirinbeik/pen/XWbLVdP

و مورد آخر ;Position: Sticky

در مورد Sticky اولین نکته اینکه باید حتما یکی از چهار خصوصیت Top, Right, Left و Bottom رو Set کنیم وگرنه اثری نخواهد داشت. حالا به عنوان مثال ما مقدار ;Top: 2px رو Set می‌کنیم. در این حالت تا زمانی که اسکرول باعث نشه فاصله عنصر از بالای صفحه برابر با 2پیکسل بشه رفتاری دقیقا مشابه حالت Relative از عنصر می‌بینیم. اما به محض اینکه فاصله اون از بالای صفحه برابر با 2px بشه عنصر ثابت می‌شه و با اسکرول به پایین یا بالا، موقعیت مکانی عنصر تغییری نمی‌کنه. (این مورد رو حتما توصیه می‌کنم در ادیتور اجرا کنید و نتیجه رو عملا مشاهده کنید.)

index.html

<main class=&quotcontainer&quot>
  <header class=&quotheader&quot>Header of the page</header>
  <br />
  <nav class=&quotnav&quot>
    <a href=&quot&quot>HTML</a> |
    <a href=&quot&quot>CSS</a> |
    <a href=&quot&quot>JavaScript</a> |
    <a href=&quot&quot>jQuery</a>
  </nav>
  <br />
  <section class=&quotcontent&quot>
    /* Copy and Paste Lorem Ipsum text here, for any times you want*/
  </section>
  <br />
  <footer class=&quotfooter&quot>Footer of the page</footer>
</main>

style.css

.header{
  background-color: green;
  color: white;
  font-size: 30px;
  text-align: center;
  border: 2px dotted black;
  padding: 25px;
}
.nav{   
  border: 2px dotted black;
  background-color: yellow;
  padding: 15px;
  font-size: 20px;
  text-align: center;
  position: sticky; 
  top: 0;
}
.footer{
  background-color: blue;
  color: white;
  font-size: 30px;
  text-align: center;
  border: 2px dotted black;
  padding: 25px;
}

Try it yourself: https://codepen.io/shadi-shirinbeik/pen/mdJZpvW

خب... امیدوارم این مقاله براتون مفید بوده باشه. نظر، انتقاد یا پیشنهادی اگر دارین خوشحال میشم بشنوم تا باهم بیشتر یاد بگیریم. موفق باشید...

References:

1. https://medium.com/@leannezhang/difference-between-css-position-absolute-versus-relative-35f064384c6
2. https://medium.com/@jacobgreenaway12/taming-the-css-beast-master-positioning-5882bad14458
3. https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46
4. https://www.w3schools.com/css/css_positioning.asp