در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش گام به گام CSS قسمت یازدهم: موقعیت ها , Overflow

گاهی اوقات می‌توان موقعیت یک المنت را تعیین کرد برای مثال موقعیت یک المنت را به صورت ثابت در یک مکان قرار داد, طوری که حتی با اسکرول کردن هم موقعیت خود را از دست ندهد. خب این یکی از موقعیت هاست. به صورت کلی ۴ گونه موقعیت وجود دارد:

• static

• relative

• fixed

• absolute

بعضی از موقعیت ها دارای مقادیر top , right , bottom , left است. این مقادیر برای کنترل موقعیت المنت ها استفاده می شود. برای تعیین موقعیت از خاصیت position استفاده می شود.

موقعیت static: به صورت پیش فرض تمام المنت های صفحات وب دارای موقعیت استاتیک هستند. این موقعیت فاقد مقادیر top , right , bottom , left است. در هر صورت می توانید توسط خاصیت position و مقدار static موقعیت المنت را به صورت استاتیک دربیاورید.

p
{
	position:static;
}

موقعیت relative: این موقعیت به صورت پیشفرض هیچگونه کاربردی ندارد و هیچ تاثیری روی صفحه وب قرار نمی دهد. اما برخلاف موقعیت استاتیک این موقعیت دارای مقادیر top , right , bottom , left می باشد. برای مثال می توانید المنتی را با موقعیت relative و مقدار left=30px قرار دهید. البته همین کار را می توانید با خاصیت های margin انجام دهید.

p
{
	border:solid 1px #22dd33;
	width: 500px;
	position: relative;
	left:30px;
	top:20px;
}

موقعیت fixed: این موقعیت زمانی استفاده می شود که بخواهیم المنتی حتی با اسکرول کردن هم موقعیت خود را حفظ نماید. برای مثال بعضی از وبسایت ها از تبلیغات در گوشه های وبسایت استفاده می کنند که حتی با اسکرول به پایین صفحه تبلیغات درجای خودشان باقی می مانند, این موقعیت دارای مقادیر top , right , bottom , left می باشد.

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

خاصیت z-index: وقتی موقعیت مکانی یک المنت برابر absolute قرار می گیرد می توان همچنین جلو و یا عقب بودن نسبت به بقیه المنت ها را کنترل کرد. به عنوان مثال می توان تعیین کرد یک تصویر در عقب متن مورد نظر قرار گیرد. برای این کار موقعیت تصویر را absolute قرار داده و مقدار z-index را برابر -۱ قرار دهید. به مثال زیر توجه کنید.

img
{
	position:absolute;
	left:0px;
	top:0px;
	z-index:-1;
}

خاصیت overflow: خیلی اوقات احتیاج داریم که توسط اندازه مشخصی که طراح وب مقداردهی می کند متن یا شی مورد نیاز مخفی شود. البته تنها مخفی شدن نه, می توان متنی بزرگی که مد نظر داریم به صورت اسکرول بار در یک کادر قرار دهیم.

برای اینکه بهتر از این قضایا متوجه بشید, می توانید که پروژه های زیر را تک به تک اجرا کنید و نتیجه را مشاهده نمایید.

قالب اصلی پروژه:

<!DOCTYPE html>
<html>
<head>
<title>ITPRO</title>
</head>
<body>
<div class="over">
Hello This is a sample test!
Hello This is a sample test!
Hello This is a sample test!
Hello This is a sample test!
Hello This is a sample test!
Hello This is a sample test!
</div>
</body>
</html>

قالب 1 CSS:

<style type="text/css">
.over
{
	width:100px;
	height: 100px;
	background: #aaaaaa;
	overflow: visible;
 }
</style>

قالب 2 CSS:

<style type="text/css">
.over
{
	width:100px;
	height: 100px;
	background: #aaaaaa;
	overflow: hidden;
 }
</style>

قالب 3 CSS:

<style type="text/css">
.over
{
	width:100px;
	height: 100px;
	background: #aaaaaa;
	overflow: scroll;
 }
</style>

قالب4 CSS:

<style type="text/css">
.over
{
	width:100px;
	height: 100px;
	background: #aaaaaa;
	overflow: auto;
 }
</style>

نکته: تفاوت مقدار scroll و auto در این است که در حالت اول یعنی scroll اسکرول بار در هر دو سمت افقی و عمودی فراهم می شود اما در حالت دوم یعنی auto تنها به صورت عمودی اسکرول بار ظاهر می شود.

نویسنده : ارسطو عباسی

منبع : انجمن تخصصی فناوری اطلاعات ایران

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

#آموزش_گام_به_گام_css #آموزش_css #آموزش_سی_اس_اس #آموزش_مقدماتی_css
عنوان
1 آموزش گام به گام CSS قسمت اول : معرفی و آشنایی با نوشتن دستورات رایگان
2 آموزش گام به گام CSS قسمت دوم: شیوه های استفاده از CSS رایگان
3 آموزش گام به گام CSS قسمت سوم : رنگ ها و پشت زمینه ها رایگان
4 آموزش گام به گام CSS قسمت چهارم: حاشیه ها رایگان
5 آموزش گام به گام CSS قسمت پنجم: Margin , Padding , height , Width رایگان
6 آموزش گام به گام CSS قسمت ششم: متون رایگان
7 آموزش گام به گام CSS قسمت هفتم : فونت‌ و قالب‌های متنی رایگان
8 آموزش گام به گام CSS قسمت هشتم: لینک ها و لیست ها رایگان
9 آموزش گام به گام CSS قسمت نهم: جداول رایگان
10 آموزش گام به گام CSS قسمت دهم: Display و Max-width رایگان
11 آموزش گام به گام CSS قسمت یازدهم: موقعیت ها , Overflow رایگان
12 آموزش گام به گام CSS قسمت دوازدهم: جهت ها, تراز ها و غلظت رایگان
13 آموزش گام به گام CSS قسمت سیزدهم: شفافیت رایگان
14 آموزش گام بە گام CSS: قسمت چهاردهم: واکنشگرایی چیست؟ رایگان
15 آموزش گام بە گام CSS: قسمت پانزدهم: Viewport چیست؟ رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره پاییزه می تونی امروز ارزونتر از فردا خرید کنی ....