سرخط خبرها

موقعیت position در Css

موقعیت position در Css

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

خصوصیت position این امکان را به ما می دهد تا موقعیت عناصر موجود در صفحه وب را مشخص نماییم.

Positioning به شما این امکان را می دهد که موقعیت هر عنصر را به دقت در یک سند مشخص کنید. می توان مشخص کرد که موقعیت یک عنصر به عنصر پدر خود وابسته باشد یا به پنجره ی مرورگر. با استفاده از positioning می توان یک عنصر را بر روی عنصر دیگر لایه بندی کرد. Positioning شامل خاصیت position و چهار مقدار left , right , bottom ,top می باشد که مختصات دقیق محل قرار گیری عنصر را میتوان با استفاده از آن ها تعیین کرد.

خصوصیت position 

خاصیت position به تنهایی کار خاصی را بر روی عنصر انجام نمی دهد. و همیشه به همراه خاصیت های left , right , left یا top می آید،( و بلعکس) اما قبل از مقدار دهی به این خاصیت ها در اول حتما باید به خصوصیت position یکی از چهار مقدار زیر را داد :

  • Static : مقدار پیشفرض، و همان حالت عادی قرار گرفتن عناصر طبق ترتیبی که در سند HTML است می باشد.
  • Relative : اجازه می دهد که یک سند در یک محل خاص از سند قرار گیرد، و وابسته به عنصر پدر می باشد.
  • Absolute : اجازه می دهد که یک سند در یک محل خاص از سند قرار گیرد، و وابسته به پنجره مرورگر می باشد.
  • Fixed : عناصر fixed همواره در محل خود باقی می مانند حتی اگر سند scroll شود.

حال به تشریح هر یک مقادیر فوق به همراه مثال می پردازیم:

Static ( موقعیت ایستا ) :

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

عناصر static بر اساس چینش عناصر در کنار یکدیگر تعیین موقعیت می شوند. زمانیکه موقعیت ایستا را برای عناصر صفحه انتخاب می کنیم خصوصیات right, top, bottom, left, z-index بر روی موقعیت عناصر تاثیری نمی گذارند.
به طور پیش فرض از مقدار static برای عناصر استفاده می شود

مقدار static همانطور که گفتیم تاثیری بر روی عنصر ندارد و همان حالت default عناصر می باشد، بجز در عناصر لیست ها (ul ,ol ,li ) . مقدار پیشفرض برای عناصر لیست ها none است، اما اگر برای عناصر لیستها از مقدار static استفاده کنیم حالت تو در توی آن ها از بین خواهد رفت.

نکته : این حالت قبلا به وجود می آمد اما پس از آمدن css3 مقدار none برای خصوصیت position برداشته شد و دیگر همچین حالتی در مرورگر های جدید برای لیست ها به وجود نمی آید و لیست ها نیز مقدار پیشفرض static را دارند.
*در صورتی که خاصیت position بر روی مقدار static تنطیم شده باشد ، تعیین مختصات برای عناصر بی اثر بوده و مرورگر عناصر را در مکان مورد نظر خود بر حسب محتویات صفحه نمایش می دهد .
 

Offset Property

عناصری که مقدار relative , absolute  و یا fixed را دارند را می توان با استفاده از offset property ها، ( همان left, top , bottom ,right ) تعیین موقعیت کرد.

Relative ( موقعیت نسبی ) :

نام مدل Relative ممکن است شما رو به شک بندازه. برخی شاید تصور کنند که ریلیتیو به مفهوم نسبی بودن موقعیت یک عنصر نسبت به بقیه عناصر هست. اما این گونه نیست. به زبان خیلی ساده میشه گفت که موقعیت نسبی در سی‌اس‌اس به مفهوم موقعیت عنصر مورد نظر نسبت به مکان آن عنصر در حالت استاتیک هست.

برای روشن شدن موضوع مثالی میزنم: اگر به یک عنصری در صفحه وب مثلا تگ div موقعیت relative بدهیم و بعد مقدار top رو برابر ۱۰ پیکسل قرار بدیم، تگ DIV به اندازه ۱۰ پیکسل از جایگاه پیش فرض خودش میاد پایینتر و البته باعث تغییر جای عناصر پایینی خودش نمیشود.

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

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

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

*در حالتی که خاصیت position بر روی مقدار relative تنظیم شود ، مختصات تعیین شده در این قسمت ، نسبت به عنصر در برگیرنده عنصر مورد نظر محاسبه می شود . ولی در حالت هایی که خاصیت position بر روی مقادیر absolute یا fixed تعیین شده باشد ، مختصات نقاط شروع نسبت به کل صفحه در نظر گرفته می شود .

Absolute ( موقعیت مطلق ) :

مکان عناصری که به طور مطلق (Absolute) موقعیت دهی شده اند نسبت به عنصر والد آنها که موقعیتی غیر از static دارد، تعیین میشود. در صورتی که عنصر والدی برای عنصر مورد نظر پیدا نشود، بلوک <html> به عنوان والد در نظر گرفته خواهد شد.

همانند موقعیت دهی fixed، عناصری هم که به صورت absolute موقعیت دهی میشوند توسط سایر عناصر نادیده گرفته میشوند و در موقعیتی که به آنها داده میشود نمایش داده خواهند شد. این نوع موقعیت دهی نیز میتواند منجر به روی هم قرار گرفتن عناصر شود.

با انتخاب این مقدار می توانیم عناصر را در مکان دلخواهمان در صفحه، نمایش دهیم و موقعیت عناصر را نسبت به چپ، راست، پایین و بالا با استفاده از خصوصیت های left, right, top و bottom تعیین کنیم.  با انتخاب این مقدار عنصر مورد نظر از جریان طبیعی صفحه خارج می شود و نسبت به html تعیین موقعیت می شود.
عناصر با مقدار absolute می توانند بر روی عناصر دیگر قرار گیرند.

#absoluteBox {
   position:absolute;
   top:100px;
   left:250px;
   width:300px;
   height:300px;
   background-color:red;
}

————————–

h2{
position: absolute;
left:100px;
top:150px;
}

Fixed ( موقعیت ثابت ) :

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

با انتخاب مقدار fixed ، موقعیت عناصر در صفحه ثابت باقی می ماند و در صورت بالا و پایین بردن صفحه توسط اسکرول و یا تغییر اندازه پنجره مرورگر، مکان عناصر تغییری نمی کند. مقدار Fixed عنصر را از جریان طبیعی صفحه خارج می کند.
عناصر با موقعیت ثابت می توانند بر روی دیگر عناصر قرار گیرند.

عناصری که در صفحه با موقعیت دهی ثابت (Fixed) تعیین میشوند، توسط سایر عناصر نادیده گرفته خواهند شد به این معنی که مهم نیست شما این عناصر را در انتهایی ترین سطر صفحه HTML قرار داده باشید یا ابتدایی ترین سطر، به هر حال این عناصر نسبت به صفحه نمایش به کاربر نمایش داده خواهند شد و بر روی سایر عناصر قرار خواهند گرفت.

مثال :

با استفاده از کد css بالا، پاراگرافی را که دارای class=fixed میباشد را در سمت بالا و چپ پنجره مرورگر به صورت ثابت نمایش میدهیم.

p.fixed {
position: fixed;
top:5px;
left:10px;

}

————-

<div style=”position:fixed;
background-color:maroon;
width:150px;height:150px;
top:10px;left:10px;”>
</div>

کاربرد  Z-index :

گاهی اوقات عناصر صفحه بر روی دیگر عناصر قرار می گیرند و این حالت وقتی اتفاق می افتد که از مقادیری به جز مقدار Static برای عناصر صفحه استفاده شود. برای اینکه بتوانیم به این عناصر در نحوه ی قرارگیری بر روی یکدیگر اولویت دهیم از مقدار Z-index استفاده می کنیم. عناصری که مقدار Z-index آنها بیشتر است در لایه های بالاتر قرار می گیرند.

هنگامی که برای عناصر مختلف در یک صفحه از مشخه ی position استفاده کنید ممکن است شاهد هم پوشانی عناصر (قرار گرفتن یک عنصر بر روی عنصر دیگر) باشید. مشخصه ی z-index این امکان را برای شما فراهم میکند تا عناصر را در محور z (عمق صفحه) نیز مرتب سازی کنید.
با استفاده از این مشخصه میتوانید تعیین کنید کدام عنصر به صفحه نمایش نزدیک تر باشد و کدام عنصر در عمق قرار داشته باشد و عناصر را جلوی سایر عنصرها قرار دهید. مقداری که z-index دریافت میکند میتواند یک مقدار مثبت یا منفی باشد

آندسته از عناصر که دارای عدد بزرگتری باشند، جلوتر از سایر عناصر نمایش داده میشوند. به عنوان مثال z-index: 3 جلوتر از z-index: 2 قرار میگیرد.
اگر مشخصه ی z-index را تعریف نکرده باشید، آن عنصری که در صفحه ی HTML زودتر فراخوانده شده باشد، زیرتر قرار میگیرد.

 

P{
Position: absolute;
z-index: -1;
}

 

html>
<head>
<style type=”text/css”>
div{
width: 200px;
height:120px;
position: absolute;
}
</style>
</head>
<body>
<div style=”background-color:#660033;top:20px;left:20px;z-index:0″></div>
<div style=”background-color:#990033;top:100px;left:50px;z-index:1″></div>
<div style=”background-color:#993333;top:180px;left:80px;z-index:2″></div>
</body>
</html>

موقعیت position در Css

QR Code For: موقعیت position در Css

درباره ی jizjiz

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.