آموزش CSS (فصل هشتم) : تعیین موقعیت عناصر

دسته بندی: آموزش
زمان مطالعه: 5 دقیقه
۲۸ آذر ۱۳۹۱

فهرست محتوای این مقاله

موقعیت عناصر در صفحه

Positioning به شما این امکان را می‌دهد که موقعیت هر عنصر را به دقت در یک سند مشخص کنید. می‌توان مشخص کرد که موقعیت یک عنصر به عنصر پدر خود وابسته باشد یا به پنجره ی مرورگر. با استفاده از positioning می‌توان یک عنصر را بر روی عنصر دیگر لایه بندی کرد. Positioning شامل خاصیت position و چهار مقدار left , right , bottom ,top می‌باشد که مختصات دقیق محل قرار گیری عنصر را میتوان با استفاده از آن‌ها تعیین کرد.

خصوصیت position 

این خاصیت به تنهایی کار خاصی را بر روی عنصر انجام نمی‌دهد. و همیشه به همراه خاصیت‌های left , right , left یا top می‌آید،( و بلعکس) اما قبل از مقدار دهی به این خاصیت‌ها در اول حتما باید به خصوصیت position یکی از چهار مقدار زیر را داد:

  • Static : مقدار پیشفرض، و همان حالت عادی قرار گرفتن عناصر طبق ترتیبی که در سند HTML است می‌باشد.
  • Relative : اجازه می‌دهد که یک سند در یک محل خاص از سند قرار گیرد، و وابسته به عنصر پدر می‌باشد.
  • Absolute : اجازه می‌دهد که یک سند در یک محل خاص از سند قرار گیرد، و وابسته به پنجره مرورگر می‌باشد.
  • Fixed : عناصر fixed همواره در محل خود باقی می‌مانند حتی اگر سند scroll شود.

حال به تشریح هر یک مقادیر فوق به همراه مثال می‌پردازیم:

مقدار Static

مقدار static همانطور که گفتیم تاثیری بر روی عنصر ندارد و همان حالت default عناصر می‌باشد، بجز در عناصر لیست‌ها (ul ,ol ,li ) . مقدار پیشفرض برای عناصر لیست‌ها none است، اما اگر برای عناصر لیستها از مقدار static استفاده کنیم حالت تو در توی آن‌ها از بین خواهد رفت.

نکته :

این حالت قبلا به وجود می‌آمد اما پس از آمدن css3 مقدار none برای خصوصیت position برداشته شد و دیگر همچین حالتی در مرورگر‌های جدید برای لیست‌ها به وجود نمی‌آید و لیست‌ها نیز مقدار پیشفرض static را دارند.

Offset Property

عناصری که مقدار relative , absolute  و یا fixed را دارند را می‌توان با استفاده از offset property ها، ( همان left, top , bottom ,right ) تعیین موقعیت کرد.

مقدار Relative

این مقدار موقعیت یک عنصر نسبت به عنصر پدر را در صفحه تعیین می‌کند و نقطه ارجاع (نقطه شروع حرکت عنصر) از مختصاتی که عنصر پدر دارد شروع خواهد شد. یا به عبارتی دیگر عنصر از محلی که در آن قرار دارد شروع به مختصات گیری می‌کند. به مثال زیر دقت کنید تا با این حالت بیشتر آشنا شوید:

مثال برای مقدار relative :

کد html :

<div class="father">
<div class="children"> </div>
</div>

و کد css :

* {
margin: 0;
padding: 0;
}
body {
width: 500px;
margin: 10px auto;
}
div.father {
width: 400px;
height: 300px;
margin: 0 auto;
border: 4px solid green;
}
div.children {
width: 150px;
height: 150px;
background: #09f;
border: 3px solid red;
}

نتیجه در مرورگر: ( بدون مختصات دهی)

حال style عنصر div.children را به مقدار زیر تغییر می‌دهیم

div.children {
width: 150px;
height: 150px;
background: #09f;
border: 3px solid red;
position: relative;
top: 10px;
right: 20px;
}

نتیجه در مرورگر :

می بییند که box ما از محلی که در آن قرار گرفته بود شروع به حرکت کردن کرده ، یعنی  10px از سمت بالا فاصله گرفت و 20px از سمت راست فاصله گرفت.

نکته :

استفاده از مقادیر منفی برای خصوصیات right , top , right , bottom مجاز می‌باشد

مقدار absolute

این مقدار موقعیت یک عنصر را نسبت به پنجره ی مرورگر تعیین می‌کند یعنی نقطه شروع عنصر از یکی از گوشه‌های پنجره (با توجه به خصوصیتی که تعیین خواهیم کرد) خواهد بود. به مثال زیر دقت کنید :

مثال:

کد html  :

<div class="father">
<div class="children"> </div>
</div>

و کد css :

* {
margin: 0;
padding: 0;
}
body {
width: 500px;
margin: 10px auto;
}
div.father {
width: 400px;
height: 300px;
margin: 0 auto;
border: 4px solid green;
}
div.children {
width: 150px;
height: 150px;
background: #09f;
border: 3px solid red;
position: absolute;
top: 10px;
right: 20px;
}

نتیجه در مرورگر :

اگر دقت کنید، می‌بینید که نقطه شروع حرکت عنصر دیگر وابسته به عنصر پدر(مربع سبز) نیست و با توجه به خصوصیت top و right که تعیین کردیم عنصر از گوشه سمت راست و بالای مرورگر شروع به حرکت کرده است.

مقدار fixed

این مقدار موقعیت عنصر را همانند مقدار absolute وابسته به صفحه مرورگر خواهد کرد، یعنی نقطه شروع حرکت عنصر از یکی از گوشه‌های پنجره مرورگر خواهد بود با این تفاوت که عنصری با مقدار fixed پس از موقعیت دهی به آن همواره در محل خود باقی می‌ماند، حتی اگر صفحه scroll شود.

(همانند دکمه‌های اشتراک گذاری که در سمت راست مطلب می‌بینید).

بسیار خب؛ تا به اینجا با نحوه تعیین موقعیت عناصر، و مختصات دهی به آن‌ها آشنا شدید، در جلسه بعد با طریقه نمایش عناصر (display) و طریقه لایه دهی (z-index) آشنا خواهیم شد.

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

محمدرضا

سلام من در جوملا سی اس اس مینویسم

اما زیر این دو عکس فضای خالی سفید زیادی میدازه چه جوری فضای خالی رو حذف کنم؟
از absulote نمیخوام استفاده کنم چون باعث میشه عکس ها رو تو کامپیوتر های دیگه جا به جا نشون میده

سجاد دریس

خب باید ببنید این فضای خالی به چه دلیل ایجاد شده، ممکنه اثر float باشه. یا شاید عنصری رو hide کرده باشید.
از margin-bottom با مقدار منفی استفاده کنید.

aligh

فرق
div.children
با
children.
چیه ؟

سجاد دریس

سلام.
div.children فقط تگ های divی که دارای کلاس children باشه رو انتخاب می کنه
اما .children هر تگی که دارای کلاس children باشه رو انتخاب میکنه.

ali

سلام .ممنون اموزش خوبی بود .

shatel

سلام
inline و block چی هستن؟
تگ هستن؟ عنصر هستن؟
توضیح دقیق می دید؟

سجاد دریس

سلام.
این دو مقادیر خصوصیت display در زبان css هستند.
این آموزش رو بخونید

meyti pugo

ممنون نمیشه کاری کرد عنصر ها به هم دیگه وابسته نباشند؟؟
آخه من همیشه سر وابسته بودنشون مشکل دارم و تا ی متن میزارم متن ها زیر جا به جا میشن یا عناصر دیگه رو جا به جا میکنه. کلا عذابی شده…

سجاد دریس

position رو absolute قرار بدین و با margin موقعیت عنصر رو تغییر دهید.

S_vorojack

دوست عزیز می خواستم در مورد تگ Div و قالب بندیش بیشتر بگید چطور میتونم hedar,2 ستون چپ و راست که هر کدوم از این ستوناش به بخشهایی تبدیل میشن درست کنم؟

سجاد دریس

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

apastorof

آموزش css ادامه نمیدین؟ 🙁

hosein

سلام
من هنوز آموزش هاتونا ندیدم.ولی به زودی همشونا میخوام بخونم و دنبال کنم.یه سوال داشتم یه صفحه را که میخوایم طراحی کنیم چطور قسمت بالا و پایین و ستون های سمت چپ و راست وسط و تقسیم بندی های دیگه را انجام میدین ؟و توی یه فایل سی اس اس ذخیره میکنید و ازشون تو اچ تی ام ال استفاده ؟؟؟

Arash

سلام. مرسی از آموزش خوبتون. اکه میشه این PDF هر قسمت از این آموزش رو درست کنید.. چون من وقتی دانلود میکنم و باز میکنم ارور میده و نمیتونه فایل رو باز کنه ❗

amir

آقا عکس های دمو مشکل داشت منم حصلم نکشید بخونم !! 😯

سجاد دریس

سلام.
بله این چند روز چونکه در حال انتقال سرور سایت هستیم چنین مشکلی پیش اومده.
از شما عذر می خواییم.

mohandes

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

من یه تمپیلیت طراحی کردم اما درسیستم های مختلف اندازه اش متفاوته به طور مثال در سیستم خودم بک گراند اندازه است اما در سیستم دیگه کوچیکه یا centerنیست چیکار باید انجام بدم؟
ممنون از زحماتتون

محمدسینا معراجیان

خوب مشکل از فایل css قالبتون هست مشکلتون رو با لینکه قالب داخل انجمن مطرح کنید
پایدار باشید

amin

مرسی پس از این به بعد مشکلی واسم پیش اومد اینجا مطرح میکنم

مرسی از راهنمایی خوبت
ممنون

سجاد دریس

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.