آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش تعیین موقعیت در CSS و عنصرهای روی هم افتاده

دوره های مرتبط با این مقاله

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

خاصیت های تعیین موقعیت(Positioning properties)درCSSبرای طراح وب این قابلیت را فراهم می کند که المان را در مکان مشخصی در صفحه جای گذاری کند . با استفاده از این المان همچنین می توان یک عنصر را پشت عنصر دیگری قرار داد، همچنین تعیین کرد درصورت بزرگ بودن محتوای یک المان چه باید رخ دهد .
المان ها را می توان با بهره گیری از خاصیت هایtop،bottom،leftو rightتعیین موقعیت کرد . با این وجود باید توجه داشت که این خواص تنها در صورتی کار می کنند که خاصیتpositionاز پیش تنظیم شده باشد . این را هم باید گفت که بسته به روش تعیین موقعیت(positioning)بکار برده شده، نحوه ی کارکرد آن ها تغییر می کند .
در کل چهار روش مختلف تعیین موقعیت وجود دارد که به ترتیب ذیل توضیح داده شده :

تعیین موقعیت / موقعیت دهی به صورت ایستا (static positioning)

المان هایHTMLبه صورت پیش فرض با این حالت (به صورت ایستا) در صفحه جای گذاری (تعیین موقعیت) می شوند . در این حالت المان در موقعیتی که مرورگر حین تنظیم نمایش صفحه با در نظر گرفتن محل قرار گیری دیگر عناصر یا محتوا به آن تخصیص داده می شود، جای می گیرد .
المان هایی که بدین ترتیب در صفحه قرار داده شده باشند، تحت تاثیر خاصیت های top، bottom، left و right قرار نمی گیرد .

تعیین موقعیت قرار گیری عنصر به صورت دقیق و ثابت (Fixed positioning)

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

نمونه یک

        p.pos_fixed {
            position: fixed;
            top: 30px;
            right: 5px;
        }
امتحان کنید

نکته : IE7 و IE8 هر دو فقط زمانی از مقدار fixed پشتیبانی می کنند که یک !DOCTYPE (نوعی معرفی در ابتدای سند sgml یا html که یک شناسه ی عمومی یا سیستمی برای تعریف نوع سند / DTD اختصاص می دهد) تعریف شده باشد .
المان هایی که به صورت ثابت (fixed) در صفحه قرار داده شده باشند، در حقیقت از جریان (flow) عادی صفحه خارج می گردند .
المان هایی که موقعیت ثابت دارند می توانند روی دیگر عناصر قرار گیرند (همپوشانی یا overlapping) .

تعیین موقعیت یا موقعیت دهی به صورت نسبی (relative positioning)

المانی که به صورت نسبی در صفحه ی HTML موقعیت دهی شده باشد می تواند نسبت به محل قرار گیری طبیعی خود تغییر مکان دهد و یا با دیگر عناصر همپوش شود (روی دیگر عناصر قرار گیرد)، با این وجود فضای رزرو شده در جریان عادی صفحه محفوظ می ماند .

نمونه دو

        h2.pos_top {
            position: relative;
            top: 50px;
        }
امتحان کنید

المان هایی که بدین ترتیب موقعیت دهی شده باشند، اغلب به عنوان دربرگیرنده های block ویژه ی عناصری که به صورت مطلق (absolute) در صفحه قرار داده شده باشند بکار گرفته می شوند .

موقعیت دهی به صورت مطلق (absolute positioning)

در این حالت عنصر نسبت به اولین المان بالای سر خود یا همان المان پدر (parent element) موقعیت دهی می گردد که نوع موقعیت آن کاملاً متفاوت و غیر از حالت ایستا می باشد . در صورتی که چنین المانی یافت نشد، این عناصر نسبت به عنصر html تغییر موقعیت خواهد داد (block دربرگیرنده خواهد بود) :

نمونه سه

        h2 {
            position: absolute;
            left: 100px;
            top: 150px;
        }
امتحان کنید

در این حالت موقعیت دهی نیز، المان ها از جریان عادی صفحه حذف می گردند . عناصر با موقعیت مطلق می توانند بر روی دیگر عناصر قرار گیرند یا با آن ها هم پوش شوند ( overlap ) .

عناصر همپوش (المان هایی که روی هم قرار می گیرند/ overlapping elements)

خاصیت z-index ترتیب و اولویت قرارگیری یک المان را تعیین می کند (اینکه کدام المان باید در جلو یا پشت دیگر عناصر قرار گیرد) . در واقع برای مدیریت اولویت قرار گیری عناصر بر روی یکدیگر، مقدار z-index بکار می رود، بدین معنا که چند عنصر می توانند همزمان روی هم قرار گیرند . تعیین اولویت قرارگیری المان ها بر روی یکدیگر با تنظیم مقدار z-index تعیین می گردد .
یک المان می تواند z-index مثبت یا منفی داشته باشد :

نمونه چهار

        img {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: -1;
        }
امتحان کنید

عناصر با z-index بیشتر نسبت به المان هایی که z-index کمتری دارند، بالاتر قرار می گیرند .
نکته : چنانچه دو المان بدون اینکه z-index ی تعیین شده باشد روی هم سوار شوند، آن المانی که در انتهای کد HTML قرار گرفته باشد، بالاتر و جلوی المان دیگری نمایش داده می شود .

تمامی خاصیت های موقعیت دهی در CSS

مقادیر
شرح
خاصیت
auto length % inherit
لبه ی حاشیه ی دور عنصر / margin edge را برای کادر (BOX) موقعیت دهی شده تنظیم می کند
bottom
shape auto inherit
المانی که به صورت مطلق / absolute موقعیت دهی شده باشد را برش می دهد
clip
url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
نوع مکان نما یا اشاره گر که نمایش داده می شود را تعیین می کند
cursor
auto hidden scroll visible inherit
مشخص می کند در صورت بیرون زدن یا سر ریز شدن محتوا از کادر المان، چه اتفاقی بیافتد .
overflow
absolute fixed relative static inherit
نوع موقعیت المان را مشخص می کند
position
auto length % inherit
لبه ی دور حاشیه سمت راست را برای کادر موقعیت دهی شده تعیین می کند
right
auto length % inherit
لبه ی حاشیه ی دور عنصر سمت بالا را برای کادر موقعیت دهی شده تنظیم می کند
top
number auto inherit
اولویت و نحوه ی قرارگیری المان ها بر روی یکدیگر را تنظیم و مدیریت می کند
z-index
  • 9161
  •    2414
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .