0

آشنایی با دستور position

21 ارديبهشت 1393

آشنایی با دستور position

دستور پوزیشن

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

 فرض کنید کد html  ما به صورت زیر می باشد:

html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="/css.css">
</head>
<body>	
	<div>				
		<ul>
			<li>1</li>
			<li>2</li>
			<li class="third">3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>
</body>
</html>
 css
ul > li{
	list-style: none;
	line-height: 80px;
	font-size: 40px;
	width: 80px;
	height: 80px;
	background: #c5c5c5;
	margin: 10px;
}
 

نتیجه

 میبیند ابتدا لیست شماره 1 در بالا قرار گرفت و بقیه نسبت به تگ بالا سری خود تعیین موقعیت شده اند حالا ما دستور scs بالا را به دستور زیر تغییرمی دهیم .

css
ul > li{
	list-style: none;
	line-height: 80px;
	font-size: 40px;
	width: 80px;
	height: 80px;
	background: #c5c5c5;
	margin: 10px;
	float: right;
}
 

نتیجه

 می بینم که مربع ها نسبت به مربع قبلی در سمت راست چیده میشوند میبییند اگر ما از مارجین سمت راست یک عدد کم کنیم می بینیم که تمام مربع ها 1 پیکسل به مربع قبلی نزدیکتر میشوند میبیند نمیتوان تگی رو جابجا کرد ولی بر روی تگ بعد از خود تاثیر نداشته باشد. نمی توان دو مربع را روی هم قرار داد نمیتوان این وابستگی رو ازبین برد.

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

اگر بخواهیم مربعی رو جابجا کنیم بدون اینکه بر روی موقعیت مربع بعد ازخود تاثیری داشته باشد

اگر بخواهیم دو مربع رو روی هم قرار دهیم

اگر بخواهیم مربع رو در جایی از صفحه ثابت نگه داریم که حتی با اسکرول صفحه موقعیت آن تغییر نکند

در اینجا باید از دستور position استفاده کرد
این دستور 4  حالت متفاوت به خود  می گیرد

 1. حالت static

حالت static درواقع مقدار پیش فرض همه تگ ها می باشد که با کم و یا زیاد کردن right,left, top , bottom هیچ تاثیر بر روی موقعیت تگ نخواهد داشت.

2. حالت relative

 حالت relative این حالت دارای 2 کاربرد می باشد :

1.  با این دستور میتوان موقعیت یک تگ را نسبت به خودش جابجا کرد  بدون اینکه در موقعیت تگ های دیگر تاثیری داشته باشد . به عنوان مثال بخواهیم مربع شماره 3 را به اندازه 10px بالا ببریم .

css
ul > li{
	list-style: none;
	line-height: 80px;
	font-size: 40px;
	width: 80px;
	height: 80px;
	background: #c5c5c5;
	margin: 10px;
	float: right;
}
ul li.third{
	position: relative;
	bottom: 10px;
}
 

نتیجه

 

 می بینیم که  مربع شماره 3 به اندازه 10 پیکسل به سمت بالا جابجا شد ولی موقعیت مربع های دیگر را تغییر نداد.

2. این حالت دارای یک کاربر دیگر نیز میباشد که در قسمت حالت absolute  توضیح داده خواهد شد.

3. حالت absolute

اگر بخواهیم همین مربع سوم را نسبت به body ، به اندازه 30px از سمت چپ و 40px  از بالا قرار دهیم کد css آن به صورت زیر خواهد بود:

css
ul > li{
	list-style: none;
	line-height: 80px;
	font-size: 40px;
	width: 80px;
	height: 80px;
	background: #c5c5c5;
	margin: 10px;
	float: right;
}
ul li.third{
	position: absolute;
	top: 40px;
	left: 30px;
}
 

نتیجه

مییبیند که این مربع دیگر فضایی اشغال نمی کند یعنی مربع شماره 2 که تعیین موقعیت شد بلا فاصله بعد از آن مربع شماره 4 تعیین موقعیت مشود. واین بدین معناست که اگر ما کد زیر را داشته باشیم:

html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="/css.css">
</head>
<body>	
	<div>				
		<span class="blue"></span>
	</div>
</body>
</html>
 css
div{
	background: #7ab5d3;
}
div span{
	display: block;
	width: 40px;
	height: 40px;
	margin: 0 auto;
	background: #185777;
}
 

نتیجه

 می بینیم بااینکه تگ div دارای هیچ ارتفاعی نیست ولی به دلیل اینکه تگ span که در داخل آن قرار دارد دارای ارتفاع 40px میباشد ارتفاع  تگ div نیز به همین مقدار می رسد حال اگر مقادیر تگ  span  را در حالت absolute  قرار دهیم نتیجه زیر حاصل خواهد شد:

css
div{
	background: #7ab5d3;
}
div span{
	display: block;
	width: 40px;
	height: 40px;
	margin: 0 auto;
	background: #185777;
	position: absolute;
}
 

نتیجه

 می بینیم که اینبار ارتفاع تگ div 0 میباشد و بک گراند آن معلوم نیست  دلیل آن این است که ما تگ span را در حالت absolute قرار دادیم بنابراین هیچ فضایی اشغال نمی کند.

حال اگر css مثال قبل را به صورت زیر تغییر دهیم:

css

div{
	background: #7ab5d3;
	height: 200px;
	width: 300px;
	margin: 0 auto;
}
div span{
	display: block;
	width: 40px;
	height: 40px;
	margin: 0 auto;
	background: #185777;
	position: absolute;
	left: 0px;
}

 

نتیجه

می بینیم که مقدار left که به  تگ span اعمال کردیم از لبه کار محاسبه شده است حال اگر بخواهیم از لبه تگ بالاتر آن یعنی تگ div مورد محاسبه قرار گیرد کافیست به تگ div پوزیشن relative را اعمال کنیم بدین صورت:

css
div{
	background: #7ab5d3;
	height: 200px;
	width: 300px;
	margin: 0 auto;
	position: relative;
}
div span{
	display: block;
	width: 40px;
	height: 40px;
	margin: 0 auto;
	background: #185777;
	position: absolute;
	left: 0px;
}
 

نتیجه

می بینیم این بار مبنای محاسبه تگ div  میباشد این دومین کاربرد حالت relative بود که در بالا توضیح داده شد.

4. حالت fixed

اگر ما بخواهیم تگ span را نسبت به مانتیور (نه صفحه وب سایت یا مرور گر) ثابت کنیم و با اسکرول صفحه این تگ  همچنان درجای خود ثابت باشد بدون اینکه تغییر بکند کافیست ان را در حالت fixed قرار دهیم یعنی اگر بخواهیم تگ span را  نسبت به پایین صفحه  30px و نسبت به سمت راست 10px ثابت کنیم  دستور آن به صورت زیر خواهد بود:

css

div{
	background: #7ab5d3;
	height: 200px;
	width: 300px;
	margin: 0 auto;
	position: relative;
}
div span{
	display: block;
	width: 40px;
	height: 40px;
	background: #185777;
	position: fixed;
	right: 0px;
	bottom: 30px;
}

 

نتیجه

 

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

 خوب این جا یک سوال پیش می آید فرض کنیم که ما 3 عدد تگ داریم که همه بواسطه پوزیشن ها بر روی یکدیگر قرار گرفته اند خوب به نظر شما مرورگر اولویت نمایش را به کدام می دهد به مثال زیر دقت کنید:

html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="/css.css">
</head>
<body>	
	<div class="red"></div>
	<div class="blue"></div>
	<div class="green"></div>
</body>
</html>
 css
div{
	width: 100px;
	height: 100px;
	margin: 10px;
	float: left;
}
div.red{
	background: #9e4a52;
}
div.blue{
	background: #5b88ae;
}
div.green{
	background: #5bae7c;
}
 

نتیجه

حالا به تگ های div پوزیشن absolute را اعمال می کنیم.

css
div{
	width: 100px;
	height: 100px;
	margin: 10px;
	float: left;
	position: absolute;
}
div.red{
	background: #9e4a52;
	top: 0px;
	left: 0px;
}
div.blue{
	background: #5b88ae;
	top: 30px;
	left: 30px;
}
div.green{
	background: #5bae7c;
	top: 60px;
	left: 60px;
}
 

نتیجه

می بینیم که مرورگر اولویت را همواره به تگ آخر می دهد حال اگر ما بخواهیم اولویت ها را تغییر دهیم باید از دستور z-index استفاده کنیم توجه داشته باشد مقدار پیش فرض این دستور 0 می باشد اگر ما بخواهیم مربع آبی دارای اولویت باشد کافیست مقدار z-index آن را برابر 1 قرار دهیم بدین صورت:

css

div.blue{
	background: #5b88ae;
	top: 30px;
	left: 30px;
	z-index: 1;
}
 

نتیجه

دیدیم که با این دستور می توان اولویت ها را تغییر داد هر تگی که دارای مقدار بالاتری باشد دارای اولویت بیشتری می باشد اگر مقدار دو تگ برابر باشد اولویت با تگی است که موقعیت پایین تری در کد html داشته باشد.

توجه داشته باشید این پوزیشن ها از پرکاربردترین دستورها در سی اس اس می باشند به طوری که بدون آنها ساخت اسلاید شو ، تب ، منوی دراپ دان و .... غیر ممکن خواهد بود.

 
صادق جعفری

صادق جعفری

متخصص طراحی و اجرای انواع قالب وب سایت برای انواع cms (جوملا ، وردپرس و ...)

با بیش از 4 سال سابقه و بیش از 35 پروژه موفق

دیدگاه‌ها

میلاد
میلاد دوشنبه, 12 آبان 1393 13:19 پاسخ دادن
واقعا دست شما درد نکنه من قبلا وب توضیحات وب سایت w3schools رو در مورد پوزیشن ها خونده بودم ولی واقعا هیچی متوجه نشدم ازش اما با خوندن آموزش شما واقعا پوزیشن ها رو درک کردم
صادق جعفری
صادق جعفری چهارشنبه, 14 آبان 1393 01:31 پاسخ دادن
با سلام
ممنون که به وب سایت ما سر زدید امیدوارم که آموزش های دیگر سایت نیز برای شما مفید بوده باشد.
سمیه موسوی
سمیه موسوی سه شنبه, 27 تیر 1396 06:33 پاسخ دادن
عالی بود
سایه
سایه شنبه, 07 مرداد 1396 12:58 پاسخ دادن
سلام
خیلی ممنون
من یه مشکل بزرگ داشتم که بعد از جند روز سرچ کردن بلاخره توی وب سایت شما پیداش کردم
مرسی واقعا

نوشتن دیدگاه