• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

37904 ۲۸ آذر ۹۱
1 2

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

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 :

و کد css :

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

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

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

1 2
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 24 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

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

    • ‏‏
      سجاد دریس(۱۴ خرداد ۱۳۹۲)

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

  • ‏‏

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

  • ‏‏

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

  • ‏‏

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

    • ‏‏
      سجاد دریس(۲۸ مهر ۱۳۹۲)

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

  • ‏‏
    محمدرضا(۹ آبان ۱۳۹۲)

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

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

    • ‏‏
      سجاد دریس(۱۰ آبان ۱۳۹۲)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram