menu

CSS Positions

CSS Positions

پنجشنبه 25 شهریور 1395

برای یه طراح front-end توی وب، تسلط CSS یه چیز ضروری هست و البته یادگیری و درک CSS هم چیز خیلی سختی نیست. کدهای CSS خیلی ساده و کوتاه هستند و تعدادشون هم خیلی کمه؛ ولی با این حال، یکی از قسمت هایی که درکش یکم سخت تر از بقیه ی جاهاست، CSS Positions هست. خیلی از ماها (حتی خود من) وقتی ظاهر یه المنت درست در نمیاد و اونجایی که میخواهیم قرار نمیگیره، میاییم یکی یکی Position های مختلف بهش میدیم تا بالاخره یکیش کار ما را راه بندازه! توی این پست قراره ما درباره ی CSS Positions صحبت کنیم و تفاوت های اونها با هم دیگه را بررسی کنیم

در کل ما 5 تا Position مختلف داریم : static و Relative و Absolute و fixed و البته inherit

هر کدوم از این خصیصه ها و مقادیر کارآیی خاص خودشون را دارند و درک اونها، اولین قدم برای طراحی یه Layout مناسب برای وب سایتتون هست.

اولین مقداری که میخواهیم بررسی کنیم، static هست. این مقدار، مقدار پیشفرض یه المنت هست و در واقع همون حالت نرمال المنت های ما هست داشتن این مقدار باعث میشه که block های ما (المنت های با display:block ) مثل حالت عادی، یکی روی دیگری (دقیق ترش یکی زیر دیگری!) چیده بشند و یا المنت های ما با display:inline به طور خطی یکی پس از دیگری باشه. نکته ی مهم درباره ی این position این هست که با دادن این position به یه المنت، شما نمیتونید با دادن خصیصه های right و left و top و bottom مختصات المنت را تغییر بدید

برای مثال، من کد html زیر را توی یه فایل html میزنم

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS Positions</title>
	<link rel="stylesheet" href="./style.css">
</head>
<body>
	<div class="main">
		<div id="box-1"></div>
		<div id="box-2"></div>
		<div id="box-3"></div>
	</div>
</body>
</html>

و  توی فایل style.css خودم هم کد های زیر را میزنم

#box-1{
	background-color: red;
}
#box-2{
	background-color: blue;
}
#box-3{
	background-color: green;
}
#box-1,#box-2,#box-3{
	position: static;
	display: block;
	width: 200px;
	height: 200px;
}

میبینید که نتیجه اش این شکلی میشه

البته درسته که شما با استفاده از این position نمیتونید از top و right و left و bottom استفاده کنید، ولی غصه نخورید! برای استفاده از اونها، شما میتونید از Position:relative استفاده کنید!

Relative خیلی خیلی شبیه به Static هست (البته همه ی 5 تا position شبیه به هم اند!)، این Position باعث میشه که Block های شما روی هم چیده بشه یا inline های شما پشت سر هم باشه، درست عین Static ، با این تفاوت که شما میتونید اینجا از 4 تا خصیصه ی دیگه هم استفاده کنید. خصیصه های Top و Right و Left و Bottom. 

دادن این چهار تا خصیصه باعث میشه که ما موقعیت المنت های خودمون را به طور مستیقیم، نسبت به المنت پدر (Parent Element) مشخص کنیم. مثلا با دادن CSS زیر

#box-1{
	right:10px;
}

تعیین میکنیم که گوشه ی راست المنت ما، 10px بیشتر از گوشه ی راست المنت پدر (Parent Element) به سمت چپ متمایل بشه. یا با دادن top:10px میگیم که المنت ما نسبت به المنت پدر خودش (یعنی اون المنتی که المنت ما توش قرار داره!) 10px پایین تر باشه.

مثلا من کد css زیر را میزنم

#box-1{
	background-color: red;	
}
#box-2{
	background-color: blue;
}
#box-3{
	background-color: green;
}
#box-1,#box-2,#box-3{
	position: relative;
	display: block;
	width: 200px;
	height: 200px;
}
#box-1{
	right:50px;
}

و نتیجه اش

نکته ی قابل توجه درباره ی relative این هست که ما اگه با استفاده از relative و مختصات دهی با right و left و top و bottom، جای یه المنت را عوض کنیم، جای اصلی اون المنت توی صفحه حفظ میشه و بقیه ی المنت ها جای اون را نمیگیرند

مثلا با زدن css زیر

#box-1{
	background-color: red;	
}
#box-2{
	background-color: blue;
}
#box-3{
	background-color: green;
}
#box-1,#box-2,#box-3{
	position: relative;
	display: block;
	width: 200px;
	height: 200px;
}
#box-2{
	left:400px;
}

نتیجه این میشه

میبینید که جای اصلی بلاک آبی رنگ، همچنان حفظ شده باقی میمونه و بلاک سبز رنگ نمیاد جاش را بگیره

تا الان ما با relative و static خیلی ساده آشنا شدیم و این دوتا مقدار خیلی نرمال عمل میکردند! بریم یه سری به مقدار غیر نرمال بعدی بزنیم!

absolute دقیقا همون چیزی هست که قواعد صفحه ی شما را عوض میکنه!

absolute خیلی شبیه به relative عمل میکنه، ولی وقتی شما میخواهید با استفاده از top و left و right و botoom موقعیتش را مشخص کنید، همه چی متفاوت میشه!

توی relative موقعیت ها نسبت پدر مستقیم (first parent) مشخص میشد، ولی توی Absolute موقعیت ها بر اساس اولین پدری (parent) مشخص میشه که دارای position:relative باشه!

کمی گیج کننده شد؟ باشه

بیاید یه چند تا مثال بزنیم. برگردیم به همون صفحه ی html خودمون

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS Positions</title>
	<link rel="stylesheet" href="./style.css">
</head>
<body>
	<div class="main">
		<div id="box-1"></div>
		<div id="box-2"></div>
		<div id="box-3"></div>
	</div>
</body>
</html>

برای این صفحه میایم و CSS هامون را اینطوری میزنیم

#box-1{
	background-color: red;
	top:0;
	right: 0;
}
#box-2{
	background-color: blue;
	top: 0;
	left: 0;
}
#box-3{
	background-color: green;
	bottom: 0;
	right: 0;
}
#box-1,#box-2,#box-3{
	position: absolute;
	display: block;
	width: 200px;
	height: 200px;
}

نتیجه اش این میشه

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

بیاید کد زیر را به css مون اضافه کنیم

.main{
	width:600px;
	height: 600px;
	position: relative;
	top: 100px;
}

و صفحه مون را اجرا کنیم. بعله! همینه!

سه تا مربع ما دیگه به گوشه ها نچسبیده اند!

چرا؟ چون همونطور که گفتم، مختصات های absolute نسبت به اولین پدری که دارای position:relative باشه تنظیم میشند و چون ما به المنت main خودمون، position:relative داده ایم، مختصات ما نسبت به اون تنظیم شده

این مهم ترین تفاوت absolute با relative بود

یکی دیگه از تفاوت های absolute با relative این هست که برخلاف relative که توی اون با دادن مختصات ها، جای اصلی بلاک همچنان حفظ میشد و بقیه ی بلاک ها جاش را تصاحب نمیکردند، توی absolute با جابه جا شدن یه بلاک، (در واقع با absolute شدن یه بلاک) جای اون حذف میشه و بقیه جای اون را میتونند تصاحب کنند. مثلا توی کد css زیر

#box-1{
	background-color: red;	
}
#box-2{
	background-color: blue;
}
#box-3{
	background-color: green;
}
#box-1,#box-2,#box-3{
	position: relative;
	display: block;
	width: 200px;
	height: 200px;
}
#box-2{
	position: absolute;
	left:400px;
}

نتیجه اش اینجوری میشه

چون که با absolute شدن بلاک آبی رنگ، جای اون حذف میشه و جاش توسط بلاک های بعدیش (بلاک سبز رنگ) تصاحب میشه

میخواید کمی بیشتر با absolute بازی کنید؟

ما میتونیم بدون استفاده از width و height، با استفاده از absolute اندازه ی المنت هامون را مشخص کنیم!

بیاید کد css مون را به زیر تغییر بدیم و نتیجه اش را ببینیم!

#box-1{
	background-color: red;
	top:0;
	right: 0;
}
#box-2{
	background-color: blue;
	top: 0;
	left: 0;
}
#box-3{
	background-color: green;
	bottom: 10px;
	right: 10px;
	left: 10px;
	top: 10px;
	position: absolute;
}
#box-1,#box-2{
	position: absolute;
	display: block;
	width: 200px;
	height: 200px;
}
.main{
	width:600px;
	height: 600px;
	position: relative;
	top: 100px;
}

و نتیجه اش این میشه

گرفتید چی شد؟!

ما الان به اون المنتمون که رنگش سبز هست گفتیم که از سمت راست 10px فاصله داشته باش، از سمت چپ هم همینطور. از بالا و پایین هم 10پیکسل فاصله داشته باش. و اون برای اینکه هم از پایین و هم از بالا 10پیکسل فاصله داشته باشه، اونقدر کش میاد (اندازه اش را تنظیم میکنه) تا به حالت مطلوب ما برسه!

صحبت درباره ی absolute فک کنم کافی باشه!

بریم سراغ fixed. اگه این مقدار را به خصیصه ی position بدیم، المنت ما نسبت به صفحه ای که کاربر میبینه fix میشه

درواقع المنت ما، با داشتن این مقدار، توسط صفحه اسکرول نمیشه و همیشه توی موقعیت خودش fix میشه

بیاید یه مثال بزنیم. همون صفحه ی قبلی خودمون. این دفعه بهش css های زیر را میدیم

#box-1{
	background-color: red;
	bottom: 0;
	left: 0;
}
#box-1{
	position: fixed;
	display: block;
	width: 200px;
	height: 200px;
}
.main{
	width:600px;
	height: 1600px;
}

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

بریم سراغ بعدی، inherit

این مقدار، مقداری هست که تقریبا توی تمام خصیصه ها میشه ازش استفاده کرد. این مقدار، یه مقدار خاص نیست، بلکه به المنت میگه مقدار position ما را همون مقداری قرار بده که پدر اون المنت (parent element) داره. مثلا با دادن این مقدار به یه div، اگه پدر اون div یه position:relative باشه، اون div هم position:relative میشه و اگه پدر اون المنت absolute باشه، اون المنت هم absolute میشه

این را هم اضافه کنم که این css ها چون یکم قدیمی هستند، توی تمام مرورگر ها(چه جدید و چه قدیم) اکثر اوقات یکسان نمایش داده میشند، ولی اگه نظر منو میخواید، همیشه یه نیم نگاهی به fixed و absolute داشته باشید. برخی وقت ها رندر شدن این دو تا توی مرورگر های قدیمی ممکنه دردسر ساز بشه (مخصوصا اگه با یه سری از خصیصه های جدید مثل perspective ترکیب بشند)

و درنهایت، در نظر داشته باشید که برای Layout دادن به یه صفحه، علاوه بر Position خصیصه های دیگه ای هم هستند که توی صفحه تاثیر گذارند مثل float و display و این سه خصیصه، با یکدیگر ارتباط خیلی نزدیکی دارند و میتونند روی همدیگه خیلی تاثیر بگذارند

در پست های آینده، یه سری هم به display و float خواهیم زد!

موفق و موید باشید

مهدی

منتشر شده در:

  • آواتار حمید

    حمید

    چهارشنبه 28 مهر 1395

    ارسال پاسخ

    ممنون از پستتوتن خیلی خوب بود
  • آواتار حمید

    مهدی علیخاصی

    چهارشنبه 28 مهر 1395

    نظر لطف شماست
  • آواتار علی

    علی

    چهارشنبه 28 مهر 1395

    ارسال پاسخ

    سلام.ممنون از شما به خاطر در اختیار گذاشتن تجربتون منم دوست دارم برنامه نویسی وب کار کننم.میشه راهنمایی کنید
ارسال نظر
خوانا نیست؟تعویض کد