انواع قرارگیری و موقعیتهای عناصر صفحه وب در CSS
در یک صفحه وب، تمامی اجزاء و عناصری که در صفحه مشاهده میکنید مثل عکسها، پاراگرافها و به طور کلی تمامی تگ های HTML استفاده شده دز صفحه، نسبت به هم در جاهای خود قرار گرفته اند. اما این مکانها برای این عناصر چگونه تعیین میشوند؟
در CSS یک خاصیت به اسم Position وجود دارد که وظیفه دارد جای هر بخش از کد HTML ما، که در واقع همون اجزاء تشکیل دهنده صفحه وب هستند، را مشخص کند. Position میتواند 5 مقدار Static، Relative، Absolute و Fixed داشته باشد که در ادامه هرکدام توضیح داده میشود.
همجنین 4 خاصیت top،bottom،left و right نیز برای نشان دادن فاصله عناصر صفحه از 4 ضلع صفحه مرورگر، استفاده میشوند. از ترکیب این مقادیر با انواع postition میتوان جایگاه های مختلفی برای اجزاء صفحه وب ایجاد کرد.
انواع حالتهای پوزیشن در CSS به شرح زیر میباشد:
1. حالت استاتیک: Static
حالت استاتیک، مقدار پیش فرض postition میباشد و مفهومش این است که هر تگ اچتیامال همونطور که باید، در صفحه میآید. در این حالت مقادیر پیش فرضی که web browser شما میداند در مورد اون تگ اعمال میکند. شما وقتی از یک تگ استفاده میکنی و در استایل اون هیچ مقداری برای position در نظر نمیگیری در واقع داری از استاتیک استفاده میکنی که بر اساس استانداردها در وب، خود web browser اون رو سر جای خودش قرار میده. بنابراین در حالت پیش فرض یا استاتیک، نیازی به تعیین فاصله از 4 جهت یعنی top،left،bottom و up نیست.
در این مورد اکثر مرورگرهای وب با هم تفاوتی ندارند و خروجی آنها به یک شکل هست. پس نگران نباشید! حتی اگر تا الان نمیدونستید position در css چیه، در واقع تا الان هر چی طراحی کردید، از همین استاتیک استفاده کرده اید. پس از این به بعد هم اگر نیاز به خصوصی به انواهع دیگر پوزیشن که در ادامه میاد، ندارید، بیخیال پوزیشن بشید و نیازی نیست که position:static رو در کد خودتون بیارید. ، چون حالت استاتیک، مقدار پیش فرض هست.
2. حالت مطلق: Absolute
در حالت Absolute یا مطلق، اجزاء صفحه دقیقا در جایی ظاهر میشوند که شما به تعیین میکنید. بنابراین تگی که حالت مطلق دارد باید برای آن فاصله از چپ یا راست و فاصله از بالا یا پایین را حتما مشخص کنید. در این حالت عنصر مربوطه، هیچ کاری به بقیه موارد صفحه ندارد و فقط به مختصاتی که برای آن تعیین کرده اید رجوع کرده و در آنجا ظاهر میشود.
دقت کنید مبدا مختصات در این حالت برای top و left، گوشه بالا سمت چپ صفحه مرورگر شما هست. (البته نیاز به توضیح نیست که برای bottom و right مبدا کدام نقطه میشود!) یعنی وقتی تعیین میکنید left:100px مفهومش این هست که در هر حالتی این تگ شما از ضلع سمت چپ مرورگر شما 100 پیکسل فاصله دارد. بنابراین در صورت تغییر سایز مرورگر شما، این تگ جایش عوض میشود و دیگر آنجایی نیست که شما مثلا در حالت maximize بودن مرورگر خودتون تنظیم کرده بودید.
این کد css را امتحان کنید تا موضوع کاملا مشخص شود:
#absoluteBox {
position:absolute;
top:100px;
left:250px;
width:300px;
height:300px;
background-color:red;
}
3. حالت نسبی: Relative
نام مدل Relative ممکن است شکا رو به شک بندازه. برخی شاید تصور کنند که ریلیتیو به مفهوم نسبی بودن موقیت یک عنصر نسبت به بقیه عناصر هست. اما این گونه نیست. به زبان خیلی ساده میشه گفت که موقعیت نسبی در سیاساس به مفهوم موقعیت عنصر مورد نظر نسبت به مکان آن عنصر در حالت استاتیک هست.
برای روشن شدن موضوع مثالی میزنم: اگر به یک عنصری در صفحه وب مثلا تگ div موقعیت relative بدهیم و بعد مقدار top رو برابر 10 پیکسل قرار بدیم، تگ DIV به اندازه 10 پیکسل از جایگاه پیش فرض خودش میاد پایینتر و البته باعث تغییر جای عناصر پایینی خودش نمیشود.
تا اینجا شاید حالت های Absolute و Relative به نظر بی استفاده بیایند چون کنترل موقعیت تگ html در صفحه از دست شما خارج هست و در سایزها و رزولوشن های مختلف از طرف مرورگر و کاربر شما، طراحی شما به هم میریزد. اما ترکیب این 2 حالت، یک مدل بسیار عالی و پرکاربرد در طراحی وب را به وجود می آورد:
یک تگ اچتیامال با حالت Relative، برای عناصر داخلی خودش در حالت Absolute، نقش مبدا مختصات را پیدا میکند.
نکته اول اینکه واضح هست که تگ مادر باید از نوع بلاک باشد که اکثرا در این مدل از div استفاده میکنیم و نکته دوم اینکه برای تگ مادر که در حالت نسبی هست نیازی نیست که top و left تعریف کنیم. به این ترتیب از نظر موقعیت، مثل حالت استاتیک با آن برخورد خواهد شد.
حالا در داخل تگ relative از حالت absolute استفاده میکنیم. این بار برای top و left، گوشه بالا سمت چپ تگ relative میشود مبدا مختصات. بنابراین در این حالت میتوانیم اطمینان داشته باشیم که صفحه همانطور که ما میخواهیم نشان داده میشود بدون نگرانی از سایز مرورگر! در مثال زیر اندازه مرورگر خودرا عوض کنید و resize کنید، نباید تغییری در حالت دو مربع بزرگ و کوچیک به وجود آید. به کد آن دقت کنید:
<div style="position:relative;
background-color:maroon;
width:150px;height:150px;">
<div style="position:absolute;
background-color:orange;
width:50px;height:50px;
top:10px;right:-30px;">
</div>
</div>
در این مثال مربع بزرگتر در حالت relative و مربع نارنجی هم در حالت absolute هست که از ضلع بالای مربع بزرگتر 10 پیکسل پایین تر است و 30 پیکسل از ضلع سمت راست مربع بزرگتر، به بیرون رفته است. این بیرون رفتن به خاطر مقدار منفی 30 پیکسل هست.
4. حالت ثابت: Fixed
مدل ثابت را میتوان همان مدل absolute دانست با این تفاوت که در حالت fixed، تگ شما به نسبت پنجره مرورگر ثابت خواهد ماند. یعنی اگر یک تصویر را به صورت fixed در top:0px و left:0px قرار دهید، این تصویر همواره در گوشه بالای سمت چپ صفحه نمایش داده میشود، حتی اگر شما اسکرول کنید به قسمت های پایینی صفحه، این عکس باز هم در جای خود ثابت خواهد ماند. از این مدل در تبلیغات و منوی سایت ها معمولا استفاده میکنند.
نمونه کد زیر را برای خود امتحان کنید:
<div style="position:fixed;
background-color:maroon;
width:150px;height:150px;
top:10px;left:10px;">
</div>
نکته اینکه یک div که در حالت fixed (و همچنین absolute) میباشد، اصلا مهم نیست کد آن در کجای صفحه قرار گرفته باشد. میتوانید آن را دقیقا قبل از بستن تگ body وارد کنید.
*این مطالب از خودم میباشد! اگر درآن اشتباهی میبینید، ممنون میشم که اعلام کنید. استفاده از این مطلب آزاد هست و اگر دوست دارید با انصاف باشید، منبع رو هم ذکر کنید.