عناصر موقعیت یابی با CSS

در HTML ، عناصری مانند پاراگراف ها ، تصاویر و غیره روی هم قرار گرفته اند ، مانند جعبه های موجود در انبار. تصویر زیر از یک مرورگر گرفته شده است و سه پاراگراف را که روی همدیگر قرار گرفته اند نشان می دهد. (ما به هر تصویر حاشیه ای داده ایم تا بتوانید آنها را بهتر ببینید. توجه داشته باشید که پاراگراف ها در کل صفحه کشیده شده اند ، حتی اگر در هر کلمه فقط چند کلمه متن داشته باشیم.)

 

Statically positioned HTML elements

 

در اینجا کد HTML و CSS برای صفحه فوق وجود دارد:

HTML code for statically positioned elements

با این وجود می توانید عناصر خود را در اطراف صفحه با چیزی به نام موقعیت یابی CSS حرکت دهید. گفته می شود که رفتار پیش فرض مانند پاراگرافهای بالا در یک وضعیت ثابت قرار دارد - به عبارت دیگر ، آنها حرکت نمی کنند.
اما می توانید عناصری را از جریان استاتیک عادی که در بالا مشاهده شده خارج کنید. اولین روشی که بررسی خواهیم کرد موقعیت یابی نسبی نام دارد.

موقعیت یابی نسبی
فرض کنید می خواهیم بند دو را کمی به پایین صفحه منتقل کنیم. مثل این:

Relativelly  positioned HTML elements

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

P.rel {
border: 1px solid green;
position: relative;
top: 70px;
}

و این هم کد Html:

<P class="border1">Paragraph One<P>
<P class="rel">Paragraph Two<P>
<P class="border1">Paragraph Three<P>

بنابراین هر پاراگراف دارای یک کلاس CSS با آن است. پاراگراف دوم دارای کلاس = "rel" است. کلاس rel از موقعیت: نسبی و پس از آن ویژگی برتر با مقدار 70 پیکسل استفاده می کند. کاری که این کار انجام می دهد این است که پاراگراف را به اندازه 70 پیکسل پایین بیاورد ، اما نسبت به جایی که بود. بنابراین از بالای پنجره مرورگر 70 پیکسل پایین نیست. از جایی که برای اولین بار در آن قرار گرفتید 70 پیکسل پایین است: موقعیت بالایی 0.
نکته دیگری که در اینجا باید مورد توجه قرار گیرد این است که استفاده از موقعیت نسبی پاراگراف را از جریان طبیعی خود خارج می کند اما در گذشته شکاف ایجاد می کند.
موقعیت مطلق
روش دیگر برای قرار دادن عناصر در صفحه ، موقعیت یابی مطلق است. برای قرار دادن عناصر در هرجای صفحه می توانید از موقعیت: مطلق استفاده کنید.
موقعیت یابی مطلق ، عنصری را از جریان استاتیک نرمال خارج می کند. عناصر دیگر به سمت بالا حرکت می کنند تا جای خود را پر کنند. عنصری که از جریان عادی خارج کرده اید اکنون مانند یک عنصر ایستاده است. (مرزهای عنصر برداشته شده متناسب با محتویات کوچک می شوند. اگر فضای بیشتری می خواهید باید آن را با ویژگی های عرض و ارتفاع مشخص کنید.)
مواردی که موقعیت مطلق داشته باشند در رابطه با عنصر اصلی آنها قرار می گیرند. اگر هیچ عنصر والدی وجود نداشته باشد ، پیش فرض برچسب HTML است. برای نشان دادن این معنی ، نگاهی به تصویر زیر بیندازید:

Absolutely positioned HTML elements

در اینجا ، ما یک پاراگراف از متن را در بالا قرار داده ایم و به دنبال آن دو تصویر ، یکی در زیر دیگری قرار دارد.
اکنون نگاهی به کد HTML بیندازید:

HTML for an absolutely positioned element

پاراگراف متن دارای یک سبک درون خطی است که مرز خود را روی سبز تنظیم می کند. سپس دو مجموعه برچسب DIV داریم. موارد قرمز برچسب های DIV خارجی هستند. به این موارد به عنوان برچسب های اصلی فکر کنید. درون برچسب های والد DIV ، دو برچسب داخلی DIV وجود دارد ، نشان های آبی. برای هر مجموعه برچسب DIV یک تصویر داریم.
با این حال ، اگر بخواهیم مستطیل آبی رنگ موقعیت بالایی 0 داشته باشد ، فکر می کنید چه اتفاقی می افتد؟ به کجا منتقل شود؟ خوب ، نگاهی به کد CSS با فقط موقعیت: مطلق:

CSS for an absolutely positioned element

اولین کاری که ما انجام داده ایم تنظیم مقادیر برای برچسب های HTML و BODY است. ما حاشیه را روی 10 پیکسل و padding را روی 0 قرار داده ایم. این فقط برای این است که تصاویر را با وضوح بیشتری ببینید.
برای موقعیت یابی نسبی ، ما موقعیت را توضیح داده ایم: نسبی. در یک لحظه خواهید دید که چرا. برای موقعیت مطلق ، ما در مورد مقدار برتر صفر توضیح داده ایم. سوال این است ، اگر نظرات را برای top: 0px بیرون بیاوریم مستطیل آبی به کجا ختم می شود؟ مواردی که در مرورگر اتفاق می افتد ، در اینجا انجام می شود:
 

Absolutely positioned HTML element

 

مستطیل آبی رنگ دقیقاً به بالای پنجره مرورگر می پرد. دلیل این کار این است که عنصر اصلی آن ، DIV بیرونی ، هیچ تنظیم موقعیتی ندارد. در این صورت ، موقعیت: مطلق برچسب های داخلی DIV از برچسب HTML به عنوان والد استفاده می کند. بنابراین پنجره مرورگر در بالا: 0px است.
وقتی نظرات را برای موقعیت به دست می آوریم: نسبی ، اما آنچه اتفاق می افتد در اینجا است:

Absolutely positioned HTML element

موقعیت بالا: 0px اکنون از DIV بیرونی به عنوان والد استفاده می کند. مستطیل آبی نمی تواند فراتر از این بالا برود ، بنابراین مستطیل صورتی را می پوشاند - در بالای آن قرار گرفته است.
همه اینها کاملاً پیچیده است. بنابراین فقط بخاطر داشته باشید که هنگام استفاده از موقعیت یابی مطلق ، باید عنصر اصلی را در نظر بگیرید. اگر یک عنصر والد تنظیم نکنید که از ویژگی CSS موقعیت استفاده کند ، از برچسب HTML استفاده می شود.
موقعیت ثابت
موقعیت نهایی CSS موقعیت: ثابت است. این شبیه موقعیت است: مطلق از این نظر که وقتی می خواهید عنصری را از جریان استاتیک عادی خارج کنید ، از آن استفاده می کنید. به عنوان مثال ، می توانید یک نوار کناری در سمت چپ صفحه خود با استفاده از موقعیت: ثابت داشته باشید. تفاوت در این است که ویژگی های موقعیت (بالا ، پایین ، چپ ، راست) از سمت چپ بالای پنجره مرورگر به عنوان موقعیت شروع پیش فرض خود قرار می گیرند. همچنین ، وقتی عنصر ثابت را به پایین صفحه اسکرول می کنید ، به عنوان مثال نوار کناری در جای خود قرار می گیرد. بنابراین اگر در سمت چپ بالای صفحه خود نوار کناری ثابت داشته باشید ، وقتی کاربران به پایین صفحه شما پیمایش می کنند ، در آنجا باقی می ماند.

شاخص Z
هنگامی که از ویژگی های موقعیت استفاده می کنید به چیزی به نام z-index نیز دسترسی خواهید داشت. این فقط ترتیب انباشتگی عناصر است. بنابراین می توانید تصاویر را روی هم چیده باشید ، هر کدام چند پیکسل را جبران می کنند. در اینجا دو تصویر مستطیل با مجموعه شاخص z وجود دارد. صورتی در بالا قرار دارد ، در حالی که آبی در پشت آن قرار دارد و با استفاده از خصوصیات بالا و چپ جبران می شود:

Two rectangles displayed using the CSS property z-index

کد CSS مورد استفاده قرار گرفته:

CSS code for the z-index property

z-index پیش فرض خودکار نامیده می شود و مقدار آن 0 است. اگر می خواهید چیزی را پشت عنصری قرار دهید ، می توانید از عدد منفی استفاده کنید. اگر می خواهید چیزی را در مقابل عنصر دیگر قرار دهید می توانید از عدد مثبت استفاده کنید. اگر فقط دو عنصر دارید می توانید از 0 و -1 استفاده کنید. در واقع ، می توانید z-index: 0 را از دست دهید ، زیرا این موقعیت پیش فرض خواهد بود.
سعی کنید زیاد در مورد z-index نگران نباشید - به ندرت پیش می آید که به آن نیاز داشته باشید.
یک نکته آخر در مورد ویژگی های موقعیت قبل از حرکت: شما می توانید از عدد منفی برای مقادیر بالا ، پایین ، چپ و راست خود استفاده کنید. به عنوان مثال ، در اینجا دو مستطیل ما از صفحه به سمت چپ منتقل شده اند:

Images with negative CSS position properties

این کار به سادگی با تنظیم مقدار چپ با یک عدد منفی انجام می شود:

#pos_relative {
position: relative;
left: -50px;
z-index: 0;
}


تمرین
مقادیر منفی را برای خصوصیات موقعیت دیگر آزمایش کنید تا ببینید چه اتفاقی می افتد.
در درس بعدی ، نحوه استفاده از float ویژگی CSS را مشاهده خواهید کرد.