گروه مقاله : CSS

تاريخ انتشار : 1394/02/02 - 16:17

كد :233

CSS position

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

شما می توانید موقعیت عنصر از 4سمت (بالا، پایین، چپ، راست) را تعیین نمایید اما این مقدار دهی اعمال نخواهد شد مگر آنکه قبل از آن position عنصر مورد نظر را مقدار دهی نمایید.

این خاصیت می تواند در 4 حالت مختلف بیان شود.

Fixed positioning :

هنگامی که خاصیت position یک عنصر با مقدار fixed مقداردهی می شود، این عنصر در محل تعیین شده بصورت ثابت قرار خواهد گرفت و حتی با اسکرول کردن صفحه نیز موقعیت این عنصر ثابت بوده و تغییر نخواهد کرد. سند HTML و سایر عناصر موجود در صفحه نیز بگونه ای عمل می کنند که گویا عنصر با خاصیت position : fixed; وجود ندارد.

عنصری که موقعیت آن fixed در نظر گرفته شده می توند با سایر عناصر هم پوشانی نماید و روی آن ها قرار بگیرد.

به مثال زیر توجه نمایید:

<!DOCTYPE html>

<html>

<head>

<style>

p.pos_fixed {

position: fixed;

top: 30px;

right: 5px;

color: red;

}

</style>

</head>

<body>

<p><b>Note:</b> IE7 and IE8 supports the fixed value only if a !DOCTYPE is specified.</p>

<p class="pos_fixed">position fixed</p>

</body>

</html>

نکته : Ie7, ie8 نیز از مقدارfixed پشتیبانی می کنند بشرط آنکه در ابتدای سند اچ تی ام ال، !DOCTYPE استفاده شود.

Relative positioning :

عناصری که موقعیت آنها بصورت relative تعریف می شود، در واقع موقعیت آنها وابسته به سایر عناصر می باشد. در این حالت عنصر مورد نظر می تواند جابجا شده و یا با سایر عناصر هم پوشانی نماید اما فضای مخصوص به خود در حالت نرمال را حفظ نماید.برای درک بهتر به مثال زیر توجه نمایید :

<!DOCTYPE html>

<html>

<head>

<style>

h2.pos_left {

position: relative;

left: -20px;

}

h2.pos_right {

position: relative;

left: 20px;

}

</style>

</head>

<body>

<h2>Heading with no position</h2>

<h2 class="pos_left">This heading is moved left according to its normal position</h2>

<h2 class="pos_right">This heading is moved right according to its normal position</h2>

<p>Relative positioning moves an element RELATIVE to its original position.</p>

<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>

<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>

</body>

</html>

» از عنصری که position آن بصورت relative تعریف شده غالبا به عنوان یک بلوک نگهدارنده حاوی عنصری با موقعیت absolute استفاده می شود.

Absolute positioning :

چنین عنصری از اولین عنصر والدین خود که position ی غیر ثابت ؟؟؟؟؟؟دارد پیروی می کند ولی اگر چنین عنصری یافت نشد موقعیت مکانی خود را با استفاده از موقعیت بلوک <HTML> تعیین می کند.

<!DOCTYPE html>

<html>

<head>

<style>

h2 {

position: absolute;

left: 100px;

top: 150px;

}

</style>

</head>

<body>

<h2>This heading has an absolute position</h2>

<p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p>

</body>

</html>

نکته : عنصری که به صورت absolute تعریف شده با اسکرول صفحه حرکت نکرده و سر جای خود می ماند (دقیقا بر عکس عنصری که به صورت fixed تعریف شده است) و همچنین عناصر دیگر موجود در صفحه نیز به گونه ای رفتار می کنند که گویا عنصری که به صورتabsolute تعریف شده است وجو ندارد.

عنصری که بصورت absolute تعریف می شود همچنین می تواند با سایر عناصر هم پوشانی کرده و پشت یا جلوی آنها قرار بگیرد.

عناصر هم پوشاننده یا overlapping elements :

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

به مثال زیر توجه نمایید :

<!DOCTYPE html>

<html>

<head>

<style>

img {

position: absolute;

left: 0px;

top: 0px;

z-index: -1;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>Because the image has a z-index of -1, it will be placed behind the text.</p>

</body>

</html>

» توجه داشته باشید که عنصری با z-index بالاتر همواره جلو تر از عنصری که z-index پایین تری دارد، قرار خواهد گرفت.

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

Property	Description	Values
bottom	Sets the bottom margin edge for a positioned box	auto length % inherit
clip	Clips an absolutely positioned element	shape auto inherit
cursor	Specifies the type of cursor to be displayed	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	Sets the left margin edge for a positioned box	auto length % inherit
overflow	Specifies what happens if content overflows an element's box	auto hidden scroll visible inherit
position	Specifies the type of positioning for an element	absolute fixed relative static inherit
right	Sets the right margin edge for a positioned box	auto length % inherit
top	Sets the top margin edge for a positioned box	auto length % inherit
z-index	Sets the stack order of an element	number auto inherit