09370037921

آشنایی با دستور 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
واقعا دست شما درد نکنه من قبلا وب توضیحات وب سایت w3schools رو در مورد پوزیشن ها خونده بودم ولی واقعا هیچی متوجه نشدم ازش اما با خوندن آموزش شما واقعا پوزیشن ها رو درک کردم
پاسخ دادن
صادق جعفری
صادق جعفری 14 آبان 1393
با سلام
ممنون که به وب سایت ما سر زدید امیدوارم که آموزش های دیگر سایت نیز برای شما مفید بوده باشد.
پاسخ دادن
سمیه موسوی
سمیه موسوی 27 تیر 1396
عالی بود
پاسخ دادن
سایه
سایه 07 مرداد 1396
سلام
خیلی ممنون
من یه مشکل بزرگ داشتم که بعد از جند روز سرچ کردن بلاخره توی وب سایت شما پیداش کردم
مرسی واقعا
پاسخ دادن

نوشتن دیدگاه