تنظیم موقعیت CSS

تنظیم موقعیت CSS محل قرارگیری عناصر در یک سند HTML را نشان می دهد ، خواه آن ها از جریان عادی سند پیروی کنند یا اینکه بر عناصر دیگر تأثیر می گذارند.

نحوه تنظیم موقعیت CSS

ساکن

تمام عناصر HTML به طور پیش فرض موقعیت CSS ایستا هستند. این بدان معنی است که عناصر جریان منظم صفحه را دنبال می کنند.

div.static {
   position: static;
}

ویژگی های چپ ، راست ، بالا ، پایین ، شاخص z برعناصر ثابت تأثیر نمی گذارد.

نسبت ها

نسبی موقعیت CSS به این معنی است که یک عنصر جریان منظم سند را دنبال می کند ، و سپس نسبت به خود با توجه به بالا ، راست ، پایین ، چپ جابجا می شود.

div.relative {
   position: relative;
   top: 30px;
   left: 20px;
}

توجه: نسبت CSS موقعیت مکانی دیگر عناصر HTML را تحت تأثیر قرار نمی دهد.

نسبت به خود: این به چه معناست؟

توضیحات بالا برای مبتدیان گیج کننده به نظر می رسد. اگر موقعیت عنصر را بدون ویژگی مانند بالا و پایین روی نسبی قرار دهید ، ویژگی کار نمی کند. این عنصر به سادگی ساکن خواهد بود.

با این حال ، اگر موقعیت CSS را نسبت به top: 30px تنظیم کنید ، موقعیت عنصر از موقعیت عادی خود 30 پیکسل به پایین حرکت می کند.

fixed

وقتی موقعیت ثابت را روی عنصری تنظیم می کنید ، از جریان منظم سند حذف می شود. عناصر دیگر عناصری را که موقعیت ثابت دارند کاملاً نادیده می گیرند.

div.fixed {
   position: fixed;
   left: 5px;
   top: 5px;
   background-color: green;
}

توجه: موقعیت ثابت به این معنی است که یک عنصر نسبت به پنجره مرورگر یا نمای نمایش است. بنابراین ، هنگامی که کاربران پیمایش می کنند ، عنصر ثابت در موقعیت خود باقی می ماند.

sticky

موقعیت مهم CSS عناصر را به صورت نسبی تنظیم می کند. با این حال ، عناصر وقتی که عنصر هنگام پیمایش به مکان خاصی برسد ، ثابت می شوند.

مثال زیر دارای یک هدر چسبنده و یک فوتر چسبنده است. آنها از موقعیت مشخص شده حرکت می کنند:

header {
   position: sticky; top: 30px;
   background-color: green;
}

footer {
   position: sticky; top: 30px;
   background-color: yellow;
}

توجه: این موقعیت مهم CSS آزمایشی است و بهترین سازگاری با مرورگر را ندارد.

مطلق

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

div.absolute {
   position: absolute;
   top: 5px;
   left: 10px;
   height: 50px;
   width: 100px;
}

این عناصر نسبت به عنصر اصلی بعدی با موقعیت نسبی یا مطلق هستند.

توجه: مطلق می تواند بالا ، چپ ، راست ، پایین داشته باشد.

نکات مهم تنظیم موقعیت CSS:

• عناصری که موقعیت وراثتی دارند خصوصیات موقعیت را از والدین آن ها می گیرند.
• تنظیم دستی موقعیت ثابت زمانی اتفاق می افتد که شما باید سایر خصوصیات موقعیت را نادیده بگیرید.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.