خانه / مقالات اموزشی / css / position در css

position در css

خواص position در css به شما اجازه می دهند که موقعیت یک عنصر را در صفحه مشخص کنید. همچنین این خاصیت ها می توانند عنصری را پشت عنصر دیگر قرار دهند و یا مشخص کنند زمانی که محتوای عنصر بیش از حد بزرگ شد چه اتفاقی بیافتد .
عناصر را می توان با استفاده از خاصیت های top ، bottom ، right و left موقعیت دهی کرد. البته این خاصیت ها قبل از مقدار دهی به خاصیت position عمل نمی کنند.
در کل چهار شیوه مقدار دهی به خاصیت position داریم که به تفصیل در زیر بیان می کنیم.
موقعیت ایستا (static)

عناصر html به طور پیشفرض دارای موقعیت ایستا می باشند.همیشه عنصری که با موقعیت ایستا مطابق با جریان عادی صفحه در صفحه قرار می گیرد. عناصر ایستا از خاصیت های top ، bottom ، right و left تاثیر نمی پذیرد.
موقعیت ثابت(fixed)

عنصری با موقیعت ثابت به طور نسبی در پنجره ی مرورگر قرار می گیرد.به طوری که اگر صفحه را در مرورگر پیشمایش(scroll) کنیم مکان این عناصر هیچ گونه تغییری نمی کند.
p.pos_fixed {
position: fixed;
top: 30px;
right: 5px;
}
عناصر موقعیت ثابت از جریان عادی خارج می شوند.سایر عناصر موجود در پرونده همانند عناصر موقعیت ثابت عمل نمی کنند.این عناصر در صفحه بر روی همه ی عناصر دیگر قرار می گیرند.
موقعیت نسبی(relative)

این عناصر به صورت نسبی نسبت به موقعیت معمولی خود قرار می گیرند.
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
محتوای عناصر موقعیت نسبی می توانند جابه جا و یا برروی سایر عناصر قرار گیرند ، اما باید توجه داشت موقعیت و فضایی که این عناصر قبل از جابه جایی داشتند همچنان برایشان محفوظ می ماند و عنصری نمی تواند در آنجا قرار گیرد .
h2.pos_top {
position: relative;
top: -50px;
}
عناصر موقیت نسبی گاهی به عنوان ظرفی برای نگه داری عناصر موقعیت مطلق به کار می روند.
موقعیت مطلق (absolute)

عناصر با موقعیت مطلق نسبت به عنصر والد خود با موقعیت نسبی موقیت دهی می شوند.
به نکته ی قبل توجه بیشتری فرمایید
اگر چنین عنصری با موقعیت نسبی پیدا نشد ، عنصر به عنوان والد در نظر گرفته می شود.
اگر صفحه وب را سفره در نظر بگیریم ، عناصر موقعیت نسبی در واقع ظرف های آن هستند و عنصر موقعیت مطلق مثلا میوه هایی که می خواهیم در یکی از این ظرف ها به دلخواه بچینیم.البته توجه کنید که عنصر والد نباید موقعیت ایستا داشته باشد.
h2 {
position: absolute;
left: 100px;
top: 150px;
}
این عناصر از جریان عادی صفحه خارج شده و حتی می توانند بر روی سایر عناصر نیز قرار گیرند.
بحث قرارگیری عناصر بر روی هم

زمانی که عناصر از موقعیت طبیعی خود خارج می شوند ، می توانند بر روی سایر عناصر قرار گیرند.
خاصیت z-index مشخص می کند که کدام عنصر برای روی کدامیک قرار می گیرد ، کدامیک جلوتر و کدامیک پشت یک عنصر قرار بگیرد.
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
این خاصیت می تواند مقدار مثبت و منفی از اعداد صحیح بپذیرد.به این صورت که عنصری که مقدار عددی بزرگتری داشته باشد جلوتر و آنکه مقدار عددی منفی دارد در پشت قرار می گیرد.
ترفند : بهتر است که برای عناصری که می خواهیم در جلو قراربگیرند از مقادیر مثبت و برای عناصری که می خواهیم در پشت قرار بگیرند از مقادیر منفی استفاده کنیم.
توجه : اگر دو عنصر بدون اختصاص مقداری به خاصیت z-index موقعیت دهی شده و روی هم قرارگیرند ، عنصری که در کد html آخر آمده روی بقیه عناصر قرار می گیرد.

اموزش طراحی سایت

آموزش طراحی سایت

اموزش طراحی وب سایت

آموزش طراحی سایت

درباره آموزشگاه نوین آی تی

همچنین ببینید

نحوه نام گذاری متغییر های جاوا

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

پاسخ دهید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net