موقعیت عناصر HTML در صفحه
خصوصیات مربوط به موقعیت در CSS به شما اجازه می دهد تا موقعیت یک عنصر را تغییر داده(position)، یا مکان یک عنصر را پشت دیگر عناصر قرار دهید(z-index) و یا مشخص کنید، زمانی که محتوای یک عنصر خیلی بزرگ شد، چه اتفاقی بیافتد(overflow)
موقعیت عناصر در صفحه با خصوصیات top و bottom و left و یا right تنظیم می شود، اما این خصوصیات کار نخواهند کرد مگر اینکه ابتدا خصوصیت position تنظیم شود و همچنین خصوصیات ذکر شده با توجه به روش موقعیت دهی، به صورت متفاوت عمل خواهند کرد.
چهار روش مختلف برای موقعیت دهی یک عنصر وجود دارد:
- position:static - موقعیت عنصر در همان جایی که کد آنها را می نویسید دیده می شود.
- position:fixed - موقعیت عنصر حتی در صورتی که به بالا و پایین صفحه برویم(scrolled) یا اندازه پنجره مرورگر را تغییردهیم، در همان موقعیت قبلی باقی می ماند.
- position:relative - یک عنصر نسبت به مکان عادی خودش، موقعیت دهی می شود.
- position:absolute - موقعیت عنصر در هر مکانی نسبت به بالا، راست، پایین یا چپ صفحه که بخواهیم نمایش داده می شود.
1- Static
موقعیت عناصر HTML در صفحه، به صورت پیشفرض static است. اگر موقعیت یک عنصر با مقدار static تنظیم شود، همیشه مطابق جریان معمول نمایش داده می شود یا به عبارتی در همان جایی که کد آن قرار دارد نمایش داده می شود.
توجه: با تنظیم خصوصیت position با مقدار "static"، خصوصیات top و bottom و right و left اثری نخواهند داشت.
2- fixed
Wiki
یک عنصر با موقعیت ثابت(fixed) در واقع نسبت به پنجره مرورگر، موقعیت دهی می شود.
موقعیت عنصر حتی در صورتی که به بالا و پایین صفحه برویم(scrolled) یا اندازه پنجره مرورگر را تغییر دهیم، در همان موقعیت قبلی باقی می ماند.
مثال (خاصیت position در CSS)
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
توجه: مرورگرهای IE7 و IE8 در صورتی که یک DOCTYPE! در بالای صفحه تنظیم کرده باشیم این حالت را پشتیبانی می کنند.
عنصری که به صورت ثابت موقعیت دهی شده، در واقع از حالت عادی خارج شده است و در HTML عنصری که اینگونه رفتار کند وجود ندارد.
3- Relative
یک عنصر نسبت به مکان عادی خودش، موقعیت دهی می شود.
مثال (خاصیت position در CSS)
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
عنصری که به صورت نسبی (Relative) موقعیت دهی شده است، می تواند روی دیگر عناصر قرار بگیرد، اما مکان عادی عنصر همچنان رزور شده باقی می ماند.
مثال (خاصیت position در CSS)
h2.pos_top
{
position:relative;
top:-50px;
}
عنصری که به صورت نسبی موقعیت دهی شده باشد، اغلب به عنوان ظرفی برای عناصر absolute استفاده می شوند:
<div style="position: relative;">
<p style="position: absolute; top: 0px; right: 0px;">----</p>
<div style="position: absolute; top: 0px; left: 0px; z-index: 1;">
------
</div>
</div>
4- Absolute
یک عنصر نسبت به مکان والد خود موقعیت دهی می شود و اگر والدی وجود نداشت، نسبت به بلوک <html> موقعیت دهی خواهد شد.
مثال (خاصیت position در CSS)
h2
{
position:absolute;
left:100px;
top:150px;
}
عنصری که به صورت Absolute موقعیت دهی می شود، در واقع از حالت عادی خارج شده است. و در HTML عنصری که اینگونه رفتار کند وجود ندارد.
عنصری که به صورت Absolute موقعیت دهی شده، می تواند روی دیگر عناصر قرار بگیرند.
روی هم قرار دادن عناصر (overlap)
زمانی که موقعیت دهی عناصر، خارج از حالت عادی باشد، می توانند روی دیگر عناصر قرار بگیرند.
خصوصیت z-index ترتیب عناصر را مشخص می کند (کدام عنصر باید جلو یا پشت دیگر عناصر باشد)
مقدار این خصوصیت می تواند مثبت یا منفی باشد:
مثال (خاصیت position در CSS)
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
یک عنصر با مقدار بزرگتر همیشه جلوتر از عنصری با مقدار کوچکتر قرار می گیرد.
توجه: اگر بدون اینکه خصوصیت z-index را تنظیم کرده باشیم، دو عنصر روی یکدیگر قرار بگیرند، عنصری که کد HTML آن بعد از دیگری آمده، بالاتر قرار خواهد گرفت.
کامنت جدید ...