موقعیت نسبی - آنچه در آن است؟ شرح مفصل

اس ام اف اچ - یک فرایند طولانی، دقیق، اما بسیار خلاق. با وجود این واقعیت است که برای اکثریت افراد شاغل در IT، صفحات وب طرح ممکن است خسته کننده به نظر می رسد معمول، متخصصان که یک حرفه برای چنین مواردی، نه تنها از لحاظ کیفی انجام وظیفه، بلکه از روند لذت ملموس دریافت خواهید کرد.

با این حال، قبل از شما رمز گذار با تجربه تبدیل شده است، هر تازه وارد صرف مقدار زیادی از زمان مطالعه دستورالعمل و مشخصات هر دو زبان HTML مختلف، و در آن متحد - CSS. درباره دقیقا چه CSS، آنچه در آن است و چه "گوش ظاهری" اجازه می دهد تا شما برای بالا، و همچنین به عنوان یکی از خواص بالای آن - موقعیت نسبی - امروز ما صحبت کنید.

CSS چیست؟

مخفف CSS می تواند رونویسی و به روسی به عنوان "شیوه نامه آبشاری" ترجمه شده است. برای تلفن های موبایل بسیار عجیب و غریب - از یک طرف، روشن به نظر می رسد، و کلمات، و از سوی دیگر - به معنای کلی است که بلافاصله دستگیر نشده است. بیایید با ساده شروع - با سبک. این تکنولوژی اجازه می دهد شما را به ضمیمه اشیاء بر روی صفحه، ویژگی های خاصی در مورد ظاهر که شما فقط می توانید یک بار ثبت نام و استفاده از یک تعداد نامحدود از زمان.

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

در نهایت، کلمه "آبشار." واقعیت این است که هر عنصر می تواند چندین سبک است که می تواند مخلوط و یا حتی با هم تداخل دارند. در چنین مواردی، مرورگر است به توسل به مجموعه ای از قوانین، به منظور نوشتن ظاهر بلوک، که تبدیل به چند سبک، با یکی از آنها، برای مثال، دارای یک ویژگی نسبی موقعیت، و از سوی دیگر - موقعیت مطلق. در واقع، چنین درگیری را نمی توان تحمل، اما در پروژه های بزرگ مانند سردرگمی اغلب اتفاق می افتد.

بنابراین در حال حاضر، زمانی که همه چیز از نام روشن است، اجازه دهید یک مثال ساده است. بیایید می گویند سایت شما باید تعداد زیادی از دکمه ها، طراحی شده در یک روش خاص باشد. آنها خواص از قبیل اندازه، سایه، کدری، رنگ داشته باشد. البته، شما می توانید از این پارامترها را مشخص، ایجاد هر یک از دکمه است، اما بسیار ساده تر برای استفاده از CSS. در عمل، شما نیاز به توصیف یک کلاس خاص، که به فهرستی از ارزش ها از همه از خواص بالا، و سپس، به جای یک لیست طولانی، برچسب هر یک از دکمه فقط نیاز به مشخص کردن نام کلاس، پس از آن مرورگر خود را خواهد این عناصر در رنگ مورد نظر رنگ و آنها را مناسب می دهد "براق".

چه اموال موقعیت؟

ما در حال حاضر به طور مستقیم اقدام به اموال موقعیت، به خاطر که این مقاله طیف آغاز شد. اگر شما با زبان انگلیسی آشنا هستند، و یا یک شهود خوب، پس شما باید در حال حاضر روشن شود - این اموال برای محل مورد است. در واقع، راه آن است، اما به جای آن مکان خاص تعیین، این ویژگی در مرورگر چگونه باید آن را یک قرار داده یا عنصر دیگری با توجه به مجاورت و یا در سراسر صفحه به عنوان یک کل می گوید.

چه ارزش می توانید ملک موقعیت؟

اموال ما را می چندین مقدار مختلف را قبول، تنها پنج وجود دارد. در اینجا توضیح مختصری از هر کدام است:

• ارث موقعیت. این قابلیت اجازه می دهد تا شما را به کپی کردن داده ها در موقعیت عنصر است که پدر و مادر. برای مثال، اگر شما یک div با وضعیت نسبی مشخص شده، پس از آن به آن را با ارزش IMG ارث می برند نیز خواهد شد به نسبی مجموعه وارد شده است.
• موقعیت استاتیک. این مقدار به تمام عناصر داده به طور خودکار، مگر اینکه هر بیان شده است. عناصر به موقعیت مناسب همانطور که در کد فوق و در دسترس نیست برای انواع "زواید"، اجازه می دهد برای تغییر موقعیت خود.
• موقعیت مطلق. با این ارزش ملک موقعیت است اغلب در مواردی که لازم است برای ایجاد یک "شناور" عنصر استفاده می شود. با یک مقدار از داده مورد اموال "نامرئی" برای اجزای دیگر از صفحه است. است که، آنها می شود که اگر عنصر مطلق ما وجود ندارد مرتب شده اند. او خود را همیشه در جای خود خواهد بود، بدون در نظر گرفتن تا چه حد صفحه میگردین شده است.
• موقعیت ثابت. از بسیاری جهات، این مقدار شبیه به یکی از قبلی است، با این حال، در حالی که عنصر مطلق به پدر و مادر موظف، ثابت استفاده می کند تنها مختصات گوشه سمت چپ بالای صفحه مرورگر، نادیده گرفتن بقیه عناصر که قبل از آن.
• در نهایت، موقعیت نسبی. این ارزش نوع اجازه می دهد تا عنصر موقعیت نسبت به دیگری، که می تواند برای ایجاد یک تطبیقی مفید مارک در "لاستیک" مشترک به نام. با این ویژگی، مورد "فشار" از سوی دیگر، بدون از دست دادن توانایی تغییر موقعیت خود را بر روی صفحه.

کار با موقعیت در مرورگرهای مختلف

همه مرورگرهای هستند به همان اندازه سازگار است. در حالی که بسیاری از برنامه های جایگزین برای اینترنت گشت و گذار بدون هیچ گونه مانع ارزش مکان درک کاملا درست است، "مزمن ویژه» اینترنت اکسپلورر در نظر مالکیت، بسته به نسخه آن است.

"خر" آنها به سادگی آن را نادیده گرفت - برای مثال، با استفاده از در حال حاضر "خاک سپرده شد" مرورگر IE6، شما می توانید مقدار ثابت و ارث استفاده نمی کند. با این حال، با وجود این واقعیت است که نسخه هفتم از وضعیت شروع به بهبود بخشد، و ثابت در حال حاضر پردازش، به ارث می برند محبوب "دانلود مرورگرهای دیگر مرورگر،" تنها در هشتمین تجسم خود رسیده است.

بقیه ناظران آرامش رسیدگی موقعیت با نسخه اول، به استثنای اپرا، که پشتیبانی از خواص در 4 تنوع آن کردم، در اواسط 90s منتشر شده است.

کار با موقعیت در جاوا اسکریپت

در واقع، داستان چگونه به کار با ویژگی موقعیت را در جاوا اسکریپت، ما فقط به خاطر نجابت گنجانده شده است. div.style.position = 'نسبی »: از آنجا که این ملک هیچ کاراکترهای خاص در عنوان را نداشته باشند، شما می توانید JS بدون هیچ گونه تغییر به عنوان مثال برای مجموعه DIV موقعیت نسبی، باید شامل یک خط مانند این استفاده کنید،،.

همانطور که می بینید، آن را بسیار ساده است.

چرا مکان مزیتهای نسبی توجه ویژه؟

در حالی که بسیاری از ارزش املاک موقعیت، آن را ملایم، "تف" در عناصر اطراف، با استفاده از مقدار "موقعیت سبک: نسبی"، همیشه باید در مورد تمام صفحه به عنوان یک کل به یاد داشته باشید، به این دلیل استفاده نادرست ممکن است به شدت "چوله" تمام محتویات صفحه نمایش .

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

چه زمانی باید موقعیت نسبی استفاده می کنید؟

علاوه بر طرح های مرسوم از صفحات HTML، وضعیت نسبی اغلب برای ایجاد انواع افکت جذاب استفاده می شود. برای مثال، اگر شما می خواهید یک آیتم "آمد" در یک صفحه یا، در مقابل، به تدریج فراتر از قلمرو خود رفت، آن است که دقیقا این ویژگی می تواند به شما کمک کند این "ترفند" اجرا می کنند.

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

علاوه بر این، در برخی از موارد ممکن است برای ایجاد نسبی "هیبرید" ارزش موقعیت. CSS، هر چند در نه در همان زمان اجازه می دهد تا شما را به مجموعه چیزی شبیه موقعیت: نسبی مطلق است، اما با استفاده از برخی ترفندها، هنوز هم ممکن است برای رسیدن به این اثر است. این روش ممکن است در موارد مفید که در آن شما نیاز به ایجاد چیزی پیچیده مانند یک tooltip یا منوی پاپ آپ. با توجه به مثال، ما یک توصیف ساختار چنین به "ترکیبی."

نمونه هایی از استفاده از رتبه بندی نسبی

موقعیت نسبی - آن را بسیار ساده است، اما ابزار انعطاف پذیر است که اجازه می دهد تا شما را به اجرای انواع اثرات جالب است. به منظور اتلاف وقت و محل به ارسال قالب کد بی فایده است، ما در حال حاضر چندین الگوریتم شفاهی، که می توانید سایت خود و یا صفحات خاص تزئین.

بیایید با "اجرا" خط شروع می شود. فرض کنید شما نیاز به یک عنصر است که "سفر" به دلیل لبه سمت چپ صفحه نمایش و به آرامی آن را به حرکت به سمت راست. برای اعمال چنین "مکانیزم" باید موقعیت مجموعه: نسبی؛ سمت چپ: -100px، که در آن -100 - تعداد تقریبی از پیکسل تشکیل عرض بلوک. این سبک به شما اجازه پنهان کردن واحد در خارج از صفحه نمایش، قرار دادن آن در "موقعیت شروع". حالا شما می توانید یک اسکریپت که هر چند میلی ثانیه را ترک ارزش ملک در واحد تا زمانی که آن را به عرض پنجره مرورگر منهای عرض عنصر برابر نمی شود افزایش دهند. نتیجه یک واحد است که از لبه سمت چپ می آید، نورد در سراسر صفحه نمایش و "پارک" در دست راست خود است.

مثال دیگر اجازه می دهد تا به شما برای ایجاد "نسبی مطلق" عناصر. به عنوان مثال، شما می توانید یک مطلق در داخل یکی دیگر از را وارد کنید، داشتن وضعیت نسبی. در نتیجه، ما یک "نسبی" بلوک که به اندازه که مطلق است محاط نیست، در حال حاضر قادر به خود را در یک موقعیت مستقل از عنصر قبلی آشکار.

اشتباهات معمول در هنگام استفاده از وضعیت نسبی

اشتباه رایج ترین در هنگام استفاده از وضعیت نسبی است که بسیاری از طراحان وب را فراموش توانایی رزرو یک مکان در واحد، که می تواند در هر نقطه واقع شده است. برای مثال، اگر شما یک نسبتا بزرگ، قرار داده شده در خارج از صفحه نمایش و داشتن یک موقعیت نسبی، در خود جای داده می شود یک "سوراخ" خمیازه. با این حال، حتی این ویژگی است که گاهی اوقات ایجاد ناراحتی های خاص می تواند برای خوب استفاده می شود برای مثال، ایجاد یک اثر جالب از "خود مونتاژ" از سایت، که در آن همه از بلوک های آن به تدریج در موقعیت بالا قرار داده شده: 0؛ سمت چپ: 0؛ تی. E. محل اصلی آن است.