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



visibility  
mode_comment   ۲۴

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

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

خصوصیت position 

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

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

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

مقدار Static

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back

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

info نکته :

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

Offset Property

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

مقدار Relative

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

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

کد html :

و کد css :

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

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

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

comment دیدگاه کاربران
meyti pugo

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

سجاد دریس

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

shatel

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

سجاد دریس

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

ali

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

aligh

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

سجاد دریس

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

محمدرضا

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

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

سجاد دریس

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

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.

1 2