درخواست های ارتباط
جستجو تنظیمات
لیست دوستان من

طراحی وب سایت با کمک HTML و CSS - بخش هفتم :: Position ها

0 نظرات

سلام به دوستان خوب ITPRO


در اینجلسه می خواهیم باهم با Position ها را یاد بگیریم که به شما کمک می کنند تا وبسایت های جذاب تری بسازید.



Position ها


ما در جلسه ی قبل با Float ها آشنا شدیم که می توانستند المان ها را در کنار هم بچینند و به صفحه ی ما شکل دهند. اگر دقت کرده باشید تمام کار هایی که ما تا الان انجام دادیم صفحه ی ما را یک سطح در نظر می گرفتند که المان ها می توانستند در آن حرکت کنند به شرطی که با المان دیگری برخورد نکنند در حقیقت صفحه ی ما دو بعد داشت که باعث می شد حرکت المان ها فقط در فضا های خالی امکان پذیر باشد . Position ها به ما این کمک را می کنند به صفحه های HTML بعد سوم ببخشیم و کاری کنیم که المان ها بتوانند روی هم و حرکت کنند.


positions


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


وقتی از Postion ها استفاده می کنیم ما باید نسبت به گوشه ی صفحه به آن مختصات دهیم البته ما می توانیم انتخاب کنیم که از کدام گوشه مختصات دهیم.


ما چند نوع Position داریم که در پایین با آن ها آشنا می شویم.



Static

این Position همان Position پیشفرض است که ما از آن استفاده می کنیم و همان طور که از اسمش معلوم است یک سطح دارد و عمقی ندارد.



Absolute

مبدا مختصات این Position گوشه های صفحه هستند. برای درک بهتر ما مثالی می زنیم. من پروژه ی جلسه ی قبل را باز می کنم . می خواهم به Section یک Postion بدهم به طوری که از بالای صفحه 20px و از سمت راست صفحه 350px فاصله بگیرد.


کد نهایی جلسه ی قبل:


	<!DOCTYPE html>
	<html>
	<head>
		<title>ITPRO</title>
		<style>
			body{
				direction:rtl;
			}
			header,footer{
				width:90%;
				margin:20px 5% 20px 0;
				border:1px solid orange;
			}
			section,aside{
				width:43%;
				margin:20px 2.5% 20px 0;
				border:1px solid orange;
				float:right;
			}
			div.clear-fix{
				clear:both	
			}
		</style>
	</head>
	<body>	
		<header>
			<p>Header</p>
		</header>
		<aside>
			<p>Aside</p>
		</aside>
		<section>
			<p>Section</p>
		</section>
		<div class="clear-fix"></div>
		<footer>
			<p>Footer</p>
		</footer>
	</body>
</html>	

خروجی:


positions


خب حالا وقت دادن Style است.


section{
    position:absolute;
    top:20px;
    right:350px;
}

ما با استفاده از پراپرتی Postion نوع آن را که اینجا absolute بود مشخص کردیم و با پراپرتی های top و right اینکه از گوشه ی بالا سمت راست صفحه چقدر فاصله بگیرد. دقت داشته باشید که ما می توانیم از پراپرتی های Top و Bottom برای مختصات Y و از پراپرتی های Right و Left برای مختصات X استفاده کنید. به سخن دیگر ما برای مشخص کردن مختصات y باید از یکی از پراپرتی های Top یا Bottom و برای تعیین مختصات X باید از یکی از پراپرتی های Right و Left استفاده کنیم.


خروجی:


positions


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



Relative

همانطور که در بالا دیدیم ما می توانیم مبدا مختصات خود را یکی از گوشه های صفحه در نظر گرفته و نسبت به آن مختصات دهیم. اما در استفاده از Position های Relative مبدا مختصات ما گوشه های صفحه نخواهند بود بلکه جایگاه آن المان در چیدمان صفحه خواهد بود. من برای مثال این قسمت Position تگ Section را به حالت Static در می آورم و پراپرتی های Top و Right را پاک می کنم:


section{
    position:static;
}

خروجی:


positions


حالا با استفاده از پراپرتی Position ، Position آن را به حالت Relative در می آورم.


section{
    position:relative;
}

میبینم که تغیری در صفحه ی ما ایجاد نشد! این به دلیل این است که طبق گفته ی بالا در Position های Relative مبدا مختصات جایگاه المان در چیدمان خواهد بود (یعنی جایی که اگر المان Position نداشته باشد در آن قرار می گیرد.)


حالا من با استفاده از پراپرتی های Bottom و Right به آن مختصات می دهم:


section{
    position:relative;
     bottom:30px;
    right:410px;
}

خروجی:


relative


دیدیم که المان ما حرکت کرد و با توجه به این که ما از پراپرتی های Bottom و Right استفاده کرده بودیم ، 30px از پایین به سمت بالا و 410px از راست به سمت چپ از جایی که قبلا در آن قرار داشت حرکت کرد.



Fixed

این Position نیز مانند Absolute از گوشه های صفحه مختصات می پذیرد اما با این تفاوت که با گویی به صفحه ی نمایش شما می چسبد و حتی با Scroll شدن صفحه هم تکان نمی خورد.


برای مثال من Postion کد قبل را به Fixed تغیر می دهم و مختصاتی هم به آن می دهم.


section{
    position:fixed;
    bottom:0;
    left:50px;
}

من 50px از ضلع چپ صفحه به سمت راست به آن مختصات می وهم و از پایین هم 0pxبه آن دادم که باعث می شود به پایین صفحه بچسبد.(در CSS می توانید واحد های اندازه هایی که 0 هستند را خالی بگذارید.)


خروجی:


fixed


تا اینجا که این Position با Absolute هیچ فرقی نداشته! اما اگر صفحه ام Scroll شود آن وقت می توان فرق آن را فهمید. برای این که صفحه ی من این قابلیت را داشته باشد من مجبورم المانی با ارتفاع بیشتر از صفحه ام ایجاد کنم. من یک Div در صفحه قرار دادم و ارتفاع آن را 2000px گذاشتم تا از ارتفاع صفحه بیشتر باشد.


خروجی:


fixed


حالا صفحه ام Scroll می شود. من صفحه ام را به سمت پایین Scroll می کنم.


fixed


اگر به Scroll pane دقت کنید می بینید که در وسط صفحه است اما باز هم Section ما در پایین صفحه مانده! این نشان می دهد که وقتی از Postion های Fixed استفاده می کنیم المان ما حتی در زمان Scroll هم سر جای خود باقی می مانند.


نمونه ای از استفاده های Position های Fixed را می توانید در نوار بالایی (نوار کاربری ) سایت ITPRO ببینید.


در جلسه ی بعد با Background ها و لیست ها و Media ها کار خواهیم کرد.


ITPRO باشید.


محمد پارسا صفوی


انجمن تخصصی فناوری اطلاعات ایران - ITPRO.ir



آیا این مطلب را پسندیدید؟
ردیف عنوان قیمت
1 طراحی وب سایت با کمک HTML و CSS - بخش اول :: مقدمه رایگان
2 طراحی وب سایت با کمک HTML و CSS - بخش دوم:: Style ها و متن ها رایگان
3 طراحی وب سایت با کمک HTML و CSS - بخش سوم::لینک ها و Css property ها رایگان
4 طراحی وب سایت با کمک HTML و CSS - بخش چهارم :: تگ های ساختاری و CSS Selector های پیشرفته رایگان
5 طراحی وب سایت با کمک HTML و CSS - بخش پنجم :: Box Model رایگان
6 طراحی وب سایت با کمک HTML و CSS - بخش ششم :: Float ها رایگان
7 طراحی وب سایت با کمک HTML و CSS - بخش هفتم :: Position ها رایگان
8 طراحی وب سایت با کمک HTML و CSS - بخش هشتم :: لیست ها ، Background ها و عکس ها رایگان
9 طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول رایگان
10 طراحی وب سایت با کمک HTML و CSS - بخش دهم :: کد نویسی اصولی و Transition ها رایگان
11 طراحی وب سایت با کمک HTML و CSS - بخش یازدهم :: Animation ها رایگان
12 طراحی وب سایت با کمک HTML و CSS - بخش دوازدهم (پایانی) :: طراحی واکنشگرا و IFrame ها رایگان
هیچ نظری ارسال نشده است

برای ارسال نظر ابتدا به سایت وارد شوید

arrow