سلام با مبحثی مهم در زمنیه تعیین مختصات و محل قرار گیری عناصر در صفحه درخدمت شما دوستانم امیدوارم که این مطالب در طراحی های شما مثمر ثمر واقع شود.
خاصیت های تعیین موقعیت(Positioning properties)درCSSبرای طراح وب این قابلیت را فراهم می کند که المان را در مکان مشخصی در صفحه جای گذاری کند . با استفاده از این المان همچنین می توان یک عنصر را پشت عنصر دیگری قرار داد، همچنین تعیین کرد درصورت بزرگ بودن محتوای یک المان چه باید رخ دهد .
المان ها را می توان با بهره گیری از خاصیت هایtop،bottom،leftو rightتعیین موقعیت کرد . با این وجود باید توجه داشت که این خواص تنها در صورتی کار می کنند که خاصیتpositionاز پیش تنظیم شده باشد . این را هم باید گفت که بسته به روش تعیین موقعیت(positioning)بکار برده شده، نحوه ی کارکرد آن ها تغییر می کند .
در کل چهار روش مختلف تعیین موقعیت وجود دارد که به ترتیب ذیل توضیح داده شده :
تعیین موقعیت / موقعیت دهی به صورت ایستا (static positioning)
المان هایHTMLبه صورت پیش فرض با این حالت (به صورت ایستا) در صفحه جای گذاری (تعیین موقعیت) می شوند . در این حالت المان در موقعیتی که مرورگر حین تنظیم نمایش صفحه با در نظر گرفتن محل قرار گیری دیگر عناصر یا محتوا به آن تخصیص داده می شود، جای می گیرد .
المان هایی که بدین ترتیب در صفحه قرار داده شده باشند، تحت تاثیر خاصیت های top، bottom، left و right قرار نمی گیرد .
تعیین موقعیت قرار گیری عنصر به صورت دقیق و ثابت (Fixed positioning)
المانی که مختصات fixed یا ثابت در صفحه داشته باشد، در واقع نسبت به موقعیت پنجره ی مرورگر تعیین مختصات می شود و در صورت بالا و پایین رفتن (scroll) صفحه نیز هیچ حرکتی نکرده و از جای خود تکان نمی خورد :
مثال :
نمونه یک
?
۱
۲
۳
۴
۵
p.pos_fixed {
position: fixed;
top: 30px;
right: 5px;
}
نکته : IE7 و IE8 هر دو فقط زمانی از مقدار fixed پشتیبانی می کنند که یک !DOCTYPE (نوعی معرفی در ابتدای سند sgml یا html که یک شناسه ی عمومی یا سیستمی برای تعریف نوع سند / DTD اختصاص می دهد) تعریف شده باشد .
المان هایی که به صورت ثابت (fixed) در صفحه قرار داده شده باشند، در حقیقت از جریان (flow) عادی صفحه خارج می گردند .
المان هایی که موقعیت ثابت دارند می توانند روی دیگر عناصر قرار گیرند (همپوشانی یا overlapping) .
تعیین موقعیت یا موقعیت دهی به صورت نسبی (relative positioning)
المانی که به صورت نسبی در صفحه ی HTML موقعیت دهی شده باشد می تواند نسبت به محل قرار گیری طبیعی خود تغییر مکان دهد و یا با دیگر عناصر همپوش شود (روی دیگر عناصر قرار گیرد)، با این وجود فضای رزرو شده در جریان عادی صفحه محفوظ می ماند .
مثال :
نمونه دو
?
۱
۲
۳
۴
h2.pos_top {
position: relative;
top: 50px;
}
المان هایی که بدین ترتیب موقعیت دهی شده باشند، اغلب به عنوان دربرگیرنده های block ویژه ی عناصری که به صورت مطلق (absolute) در صفحه قرار داده شده باشند بکار گرفته می شوند .
موقعیت دهی به صورت مطلق (absolute positioning)
در این حالت عنصر نسبت به اولین المان بالای سر خود یا همان المان پدر (parent element) موقعیت دهی می گردد که نوع موقعیت آن کاملاً متفاوت و غیر از حالت ایستا می باشد . در صورتی که چنین المانی یافت نشد، این عناصر نسبت به عنصر html تغییر موقعیت خواهد داد (block دربرگیرنده <html> خواهد بود) :
مثال :
نمونه سه
?
۱
۲
۳
۴
۵
h2 {
position: absolute;
left: 100px;
top: 150px;
}
در این حالت موقعیت دهی نیز، المان ها از جریان عادی صفحه حذف می گردند .
عناصر با موقعیت مطلق می توانند بر روی دیگر عناصر قرار گیرند یا با آن ها هم پوش شوند ( overlap ) .
عناصر همپوش (المان هایی که روی هم قرار می گیرند/ overlapping elements)
خاصیت z-index ترتیب و اولویت قرارگیری یک المان را تعیین می کند (اینکه کدام المان باید در جلو یا پشت دیگر عناصر قرار گیرد) . در واقع برای مدیریت اولویت قرار گیری عناصر بر روی یکدیگر، مقدار z-index بکار می رود، بدین معنا که چند عنصر می توانند همزمان روی هم قرار گیرند . تعیین اولویت قرارگیری المان ها بر روی یکدیگر با تنظیم مقدار z-index تعیین می گردد .
یک المان می تواند z-index مثبت یا منفی داشته باشد :
مثال :
نمونه چهار
?
۱
۲
۳
۴
۵
۶
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
عناصر با z-index بیشتر نسبت به المان هایی که z-index کمتری دارند، بالاتر قرار می گیرند .
نکته : چنانچه دو المان بدون اینکه z-index ی تعیین شده باشد روی هم سوار شوند، آن المانی که در انتهای کد HTML قرار گرفته باشد، بالاتر و جلوی المان دیگری نمایش داده می شود .
تمامی خاصیت های موقعیت دهی در CSS
خاصیت
شرح
مقادیر
bottom
لبه ی حاشیه ی دور عنصر / margin edge را برای کادر (BOX) موقعیت دهی شده تنظیم می کند
auto
length
%
inherit
clip
المانی که به صورت مطلق / absolute موقعیت دهی شده باشد را برش می دهد
shape
auto
inherit
cursor
نوع مکان نما یا اشاره گر که نمایش داده می شود را تعیین می کند
url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
left
لبه ی حاشیه ی دور عنصر سمت چپ را برای کادر / box موقعیت دهی شده تنظیم می کند
auto
length
%
inherit
overflow
مشخص می کند در صورت بیرون زدن یا سر ریز شدن محتوا از کادر المان، چه اتفاقی بیافتد .
auto
hidden
scroll
visible
inherit
position
نوع موقعیت المان را مشخص می کند
absolute
fixed
relative
static
inherit
right
لبه ی دور حاشیه سمت راست را برای کادر موقعیت دهی شده تعیین می کند
auto
length
%
inherit
top
لبه ی حاشیه ی دور عنصر سمت بالا را برای کادر موقعیت دهی شده تنظیم می کند
auto
length
%
inherit
z-index
اولویت و نحوه ی قرارگیری المان ها بر روی یکدیگر را تنظیم و مدیریت می کند
number
auto
inherit
