ویژگی position برای تعیین موقعیت یک عنصر در صفحه استفاده می شود. همه عناصر به طور پیش فرض به صورت ایستا در صفحه قرار دارند. طرح استاتیک موقعیت یک عنصر را در ترتیب ترتیب عناصر در یک صفحه تعیین می کند. این موقعیت پیش فرض برای هر عنصر است.
اگر عنصری به‌عنوان موقعیت‌پذیر مشخص شود، موقعیت آن از ثابت به یکی از چهار مقدار ویژگی موقعیت پس‌زمینه CSS: نسبی، مطلق، ثابت، چسبنده تغییر کرده است.
علاوه بر پنج مقدار ذکر شده، دو مقدار ویژگی جدید به CSS3 اضافه شده است: page و center.
پس از قرار گرفتن عنصر ( یک مقدار غیر استاتیک اختصاص داده شدموقعیت آن در صفحه با استفاده از ویژگی های افست تعیین می شود: بالا، راست، پایین و چپ. ویژگی های افست فقط روی عناصر قرار داده شده کار می کنند، بنابراین اعمال آنها برای عناصر استاتیک کار نمی کند. این ویژگی ها برای تنظیم افست یک عنصر نسبت به زمینه موقعیت یابی آن استفاده می شود.
این سیستم مختصاتی است که برای تعیین موقعیت یک عنصر با استفاده از ویژگی های افست استفاده می کنید.
عنصر نسبتاً قرار گرفته ( موقعیت: نسبی) موقعیت فرزندان کاملاً موقعیت خود را تعیین می کند و همچنین موقعیت خود را تعیین می کند. این بدان معنی است که شما می توانید یک عنصر را از موقعیت اصلی خود با استفاده از ویژگی های افست حرکت دهید. نقطه مرجع برای عنصر در این مورد، موقعیت اصلی آن در صفحه نسبت به گوشه سمت چپ بالا است:
یک عنصر نسبتاً دارای موقعیت پس از اعمال موقعیت: ویژگی نسبت به آن از موقعیت اصلی خود جابجا می شود. مربع نقطه چین نشان دهنده موقعیت اصلی عنصر در صفحه است. این عنصر از موقعیت اصلی خود 35 پیکسل به پایین و 35 پیکسل به سمت راست منتقل می شود.
یک عنصر نسبتاً قرار گرفته که از موقعیت اصلی خود جابجا می شود، موقعیت ترتیبی خود را در "پشته" بقیه طرح حفظ می کند و هر موقعیت جدیدی که در نظر گرفته شود تأثیری بر قرار دادن محتوا در صفحه ندارد. به راحتی می تواند سایر عناصر موجود در صفحه را همپوشانی کند. تصویر بالا نشان می دهد که چگونه موقعیت اصلی یک عنصر پس از جابجایی آن حفظ می شود.
وقتی یک عنصر به طور مطلق ( موقعیت: مطلق، می توان آن را نسبت به عنصر دیگری در صفحه قرار داد. عنصری که نسبت به آن قرار می گیرد باید قبلاً یک موقعیت معین داشته باشد.
با موقعیت CSS نسبی، یک عنصر کاملاً در موقعیت نسبت به یک عنصر نسبتاً موقعیت قرار می گیرد ( موقعیت: نسبی). مبدا سیستم مختصات گوشه سمت چپ بالا نسبت به عنصر قرار گرفته است.
برای مثال تصویر زیر عنصری را نشان می دهد که به صورت ایستا قرار گرفته است. مربع صورتی به سمت چپ شناور می شود تا متن در اطراف آن جریان یابد:
عنصر با موقعیت ایستا
طرح خاکستری مرز ظرف مربع صورتی را نشان می دهد. ظرف روی موقعیت: نسبی تنظیم شده است، بنابراین زمینه موقعیت یابی مربع صورتی را تنظیم می کند. هنگامی که مربع صورتی کاملاً در موقعیت قرار گرفت، از جریان صفحه حذف می شود و متن به گونه ای توزیع می شود که گویی مربع هرگز در جریان نبوده است:
مربع صورتی کاملاً نسبت به والد خود (مرزهای خاکستری) قرار دارد. واقع شده است: بالا: 30 پیکسل، سمت راست: 40 پیکسل.
اگر یک عنصر به طور مطلق در موقعیت قرار گیرد و هیچ یک از والدین آن ویژگی موقعیت آن را نداشته باشد، آنگاه نسبت به عنصر قرار می گیرد.
یک عنصر با موقعیت CSS ثابت نسبت به viewport قرار می گیرد. رفتاری مشابه عناصر کاملاً موقعیت‌یافته دارد: از جریان صفحه حذف می‌شود و دیگر بر طرح‌بندی تأثیر نمی‌گذارد. اما به جای اینکه نسبت به هر عنصری در صفحه قرار گیرد، نسبت به viewport قرار می گیرد و مستقل از پیمایش است: در موقعیتی که توسط ویژگی های offset مشخص شده است در viewport ثابت می شود.
موقعیت یابی ثابت معمولاً برای در نظر گرفتن عناصر خاص همیشه استفاده می شود. به عنوان مثال، هدر ثابت، ناوبری.
مقادیر ویژگی چسبنده، مرکز و صفحه هنوز با پشتیبانی کمی در حال حاضر آزمایشی هستند.
یک عنصر با موقعیت چسبنده ( موقعیت: چسبنده) ترکیبی از عناصر نسبی و ثابت محسوب می شود. مثلا:
عنصر (موقعیت: چسبنده؛ بالا: 70 پیکسل؛ )
عنصر داده شده طوری رفتار می کند که گویی موقعیت دارد: نسبی تا زمانی که نمای در حین پیمایش به نقطه ای برسد که 10 پیکسل از بالای درگاه دید است. اگر عنصر در بالا باشد، 70 پیکسل از بالا ثابت می شود تا زمانی که پیمایش مرورگر به آستانه برسد.
افکت چسبنده معمولاً با استفاده از جاوا اسکریپت ایجاد می شود و هنگامی که مقدار چسبنده توسط همه مرورگرها پشتیبانی شد، می توان آن را با استفاده از CSS بازتولید کرد.
یک نکته قابل توجه:شما باید یک "آستانه" برای عنصر "چسبنده" با استفاده از یکی از ویژگی های offset مشخص کنید، در غیر این صورت عنصر کار نخواهد کرد و دقیقاً به گونه ای رفتار می کند که گویی در موقعیت نسبتاً قرار گرفته است.
مقدار مرکز برای قرار دادن یک عنصر در یک عنصر دیگر استفاده می شود. عنصر مرکزی در مرکز ظرف قرار می گیرد و از "پشته" عناصر صفحه حذف می شود. شما می توانید از ویژگی های offset برای حرکت یک عنصر از موقعیت مرکزی آن استفاده کنید.
رفتار ارزش ویژگی موقعیت صفحه هنوز نامشخص است. با صفحه بندی و کانتینرهای ایجاد شده با استفاده از مناطق CSS سروکار دارد.
حقایق و نکات جالب
عناصر با موقعیت مطلق CSS که از ویژگی های افست استفاده می کنند، می توانند دارای padding ( حاشیه ها) که در داخل زمینه موقعیت یابی قرار می گیرند.
یک عنصر کاملاً قرار گرفته به اندازه محتوای آن فضای افقی و عمودی را اشغال می کند. می توان آن را کش داد تا پهنای ظرفش پر شود. برای انجام این کار، باید عرض آن را رها کنید ( عرض) تعریف نشده است و با استفاده از ویژگی های آفست راست و چپ، مرز چپ آن را روی مرز چپ والد، و مرز راست آن را در مرز سمت راست والد قرار دهید:
موقعیت: مطلق; سمت چپ: 0; سمت راست: 0;
به طور مشابه، یک عنصر کاملاً دارای موقعیت را می توان با استفاده از ویژگی های بالا و پایین به صورت عمودی کشیده شد:
موقعیت: نسبی; بالا: 0; پایین: 0;
در موردی که ارتفاع و عرض یک عنصر با موقعیت یابی مطلق CSS تعریف شده باشد، آنگاه:
- اگر هر دو ویژگی بالا و پایین تعریف شده باشند، بالا نیروی بیشتری دارد.
- اگر راست و چپ تعریف شوند، چپ برنده است.
- اگر خاصیت جهت rtl باشد ( مثلا عربی، سپس "برنده" درست است.
عناصر ثابت معمولاً نسبت به viewport قرار می گیرند. به جز زمانی که ویژگی transform را به یکی از والدین همپوشانی اعمال کنید. در این حالت، عنصر تبدیل شده یک بلوک بیرونی برای همه فرزندان در موقعیت خود ایجاد می کند، حتی آنهایی که موقعیت ثابتی دارند.
نحو رسمی
نحو:
موقعیت: ایستا | نسبی | مطلق | چسبنده | مرکز | صفحه | درست شد
مقدار اولیه:ایستا
قابل اجرا: همه موارد
استفاده در انیمیشن:خیر
ارزش های
ایستا
الگوریتم موقعیت یابی پیش فرض CSS. بلوک بر اساس جریان معمولی قرار می گیرد. ویژگی های بالا، راست، پایین و چپ اعمال نمی شوند.
نسبت فامیلی
موقعیت بلوک نسبت به موقعیت اصلی آن محاسبه می شود. در همه موارد، از جمله عناصر جدول، بر موقعیت هیچ یک از عناصر بعدی تأثیر نمی گذارد.
اثر اعمال موقعیت: ویژگی نسبی به عناصر جدول:
- جدول-ردیف-گروه، جدول-سر-گروه، جدول-پای-گروه و جدول-ردیف از موقعیت عادی خود در جدول جابجا می شوند. اگر سلول‌های جدول چندین ردیف را با هم ترکیب کنند، تنها سلول‌ها نسبت به ردیف قرار داده شده جابه‌جا می‌شوند.
- table-column-group , table-column ستون مربوطه را هنگام اعمال موقعیت: ویژگی نسبی تغییر نمی دهد.
- عنوان جدول و سلول جدول از موقعیت عادی خود در جدول خارج می شوند. اگر یک سلول جدول چندین ستون یا ردیف را شامل شود، کل سلول ترکیبی جابجا می شود.
مطلق
موقعیت بلوک با ویژگی های بالا، راست، پایین و چپ مشخص می شود که افست نسبت به بلوک بیرونی را توصیف می کند. بلوک های کاملاً قرار گرفته از جریان عادی حذف می شوند. این به این معنی است که آنها هیچ تاثیری در چیدمان عناصر بعدی ندارند. بلوک‌های کاملاً قرار گرفته می‌توانند دارای لایه‌بندی باشند تا زمانی که لایه با هیچ لایه دیگری همپوشانی نداشته باشد.
چسبنده
موقعیت بلوک با توجه به جریان نرمال محاسبه می شود (به عنوان موقعیت: نسبی). بلوک نسبت به ویوپورت و بلوک بیرونی افست و ثابت است و در همه موارد، از جمله عناصر جدول، روی موقعیت عناصر بعدی تأثیری ندارد. هنگامی که یک عنصر با چسباندن قرار می گیرد، موقعیت عنصر بعدی بدون در نظر گرفتن افست تنظیم می شود. اثر اعمال موقعیت: چسبنده به عناصر جدول مانند اعمال موقعیت: نسبی است.
مرکز
موقعیت CSS بلوک ها با ویژگی های بالا، راست، پایین و چپ تعیین می شود. بلوک به صورت عمودی و افقی در داخل ظرف نسبت به موقعیت مرکزی بلوک در ظرف محتوی متمرکز است. بلوک های واقع در مرکز از جریان عادی حذف می شوند. این بدان معنی است که آنها بر روی چیدمان عناصر بعدی تأثیر نمی گذارند (درست مانند مطلق). عناصری که در مرکز قرار گرفته اند تا زمانی که با سایرین همپوشانی نداشته باشند می توانند تورفتگی داشته باشند.
صفحه
موقعیت بلوک بر اساس مدل مطلق محاسبه می شود. هنگامی که در داخل یک منطقه قرار می گیرد، بلوک بیرونی همیشه ظرف اولیه است.
همانطور که در مدل مطلق، تورفتگی بلوک با هیچ تورفتگی دیگری همپوشانی ندارد.
مثال ها
والد ( موقعیت: نسبی؛ ) .child ( موقعیت: مطلق؛ بالا: 10 پیکسل؛ چپ: 30 پیکسل؛ ) /* هدر هنگام پیمایش درگاه نمای مشاهده می شود */ هدر ( موقعیت: ثابت؛ بالا: 0؛ چپ: 0؛ راست : 0;
نسخه ی نمایشی
نسخه ی نمایشی زیر نحوه عملکرد چهار مقدار موقعیت یابی اساسی را نشان می دهد: نسبی، مطلق، ثابت و حتی چسبنده:
نمایش نسخه ی نمایشی
پشتیبانی از مرورگر
ویژگی موقعیت در همه مرورگرهای اصلی: کروم، فایرفاکس، سافاری، اپرا، اینترنت اکسپلورر و همچنین اندروید و iOS کار می کند.
اما پشتیبانی از مقادیر ثابت و چسبنده در بین مرورگرها متفاوت است. در اینجا جداول سازگاری این دو مقدار آمده است:
در اینترنت اکسپلورر، اگر سند در حالت سازگاری باشد، موقعیت یابی ثابت در CSS کار نمی کند.
با سلام خدمت خوانندگان محترم سایت وبلاگ! زمان افزودن مطالب مفید جدید فرا رسیده است و امروز با نحوه قرار دادن عناصر مختلف در صفحه با استفاده از ویژگی موقعیت یابی برای آنها با پارامترهای مختلف (استاتیک، نسبی، مطلق، ثابت) آشنا خواهیم شد.
همچنین، در چارچوب موضوعی که در بالا مورد بحث قرار گرفت، در نظر خواهیم گرفت که چگونه می‌توانید با اختصاص مقادیر عددی مورد نیاز، یک تورفتگی را به سمت راست، چپ، بالا یا پایین با استفاده از ویژگی‌های مربوطه چپ، راست، بالا و پایین تنظیم کنید. .
اجازه دهید به شما یادآوری کنم که ما می توانیم هر صفحه وب را طبق سفارش در نظر بگیریم. آنها ظاهر یک عنصر خاص را تعیین می کنند، اما مکان آنها توسط مجموعه ای از قوانین برای صفحات سبک آبشاری دیکته می شود که در نهایت یک تصویر کامل ایجاد می کند.
تعیین موقعیت عنصر و موقعیت طبیعی (موقعیت استاتیک)
برای ملک موقعیت دارای چهار مقدار است (ایستا | نسبی | مطلق | ثابت)، که روش موقعیت یابی را تعیین می کند. همانطور که احتمالاً می دانید، پارامترهای تقریباً همه قوانین CSS را می توان از صفحه مشخصات رسمی W3 جمع آوری کرد، جایی که مجموعه کاملی از ویژگی ها و مقادیر آنها ارائه می شود، از جمله موقعیت:
مکان یابی مکان یک عنصر در یک سیستم مختصات است. بر اساس مقادیر ویژگی موقعیت، چهار نوع موقعیت یابی را می توان تشخیص داد: عادی، مطلق، نسبی و ثابت.
با استفاده از موقعیت و مواردی که در بالا ذکر کردم چپ، راست، بالا، پایین (تورفتگی به ترتیب چپ، راست، بالا، پایین)می توانید موقعیت عناصر را نسبت به یکدیگر تنظیم کنید، آنها را در یک مکان خاص ثابت کنید یا حتی یک عنصر را بر روی دیگری قرار دهید.
علاوه بر این، موقعیت یابی را می توان از طریق اسکریپت ها کنترل کرد. این امکان افزودن دینامیک به هر عنصر و همچنین ایجاد انیمیشن و جلوه های دیگر را فراهم می کند.
اگر موقعیت موجود نباشد یا روی ثابت تنظیم شده باشد، عنصر به طور معمول به عنوان بخشی از جریان HTML ارائه می شود. یعنی تمام اجزای یک صفحه وب به ترتیبی که در کد منبع صفحه وجود دارد نمایش داده می شود.
به طور خلاصه، متذکر می شوم که مقادیری غیر از استاتیک به شما امکان می دهد ترتیب استاندارد عناصر وب را در صفحه تغییر دهید، که در پرتو حل مشکلات طرح بندی غیر پیش پا افتاده بسیار مهم است. به هر حال، ابزار دیگری که می تواند ترتیب معمول را تغییر دهد این است که با آن می توانید عناصر شناور ایجاد کنید.
موقعیت مطلق
بنابراین، بیایید تجزیه و تحلیل تفاوت های ظریف فنی را با موقعیت مطلق، که توسط پارامتر مطلق ویژگی موقعیت تعیین می شود، ادامه دهیم:
موقعیت: مطلق
درک این نکته مهم است که در این حالت عنصر در جریان استاندارد نمایش داده نمی شود. بر این اساس، ما این فرصت را داریم که با تنظیم تورفتگی از لبه های پنجره مرورگر با استفاده از چپ، راست، بالا، پایین، مکان آن را در سیستم مختصات مطلق تعیین کنیم:
در اینجا A، B، C و D مقادیر عددی تورفتگی ها هستند. حال بیایید با استفاده از یک مثال خاص به ویژگی های قدر مطلق نگاه کنیم. بیایید 2 را با مربوطه در نظر بگیریم که پارامترهای (رنگ پس زمینه)، عرض (عرض) و ارتفاع (ارتفاع) را به آن اختصاص می دهیم. برای سادگی از , استفاده خواهیم کرد که با استفاده از ویژگی style پیاده سازی شده است.
برخلاف سبک های پیوندی که در عمل بهینه ترین هستند، این روش شامل قرار دادن قوانین CSS نه در یک فایل جداگانه، بلکه در قالب مقادیر ویژگی STYLE است که به تگ مورد نظر اختصاص داده شده است. در عین حال، برای خلوص آزمایش، فعلاً موقعیت مطلق را اضافه نمی‌کنیم:
دقیقاً در بالا، قبلاً گفتم که عدم وجود موقعیت پیش فرض معادل این واقعیت است که پارامتر static برای این ویژگی مشخص شده است. یعنی تمام عناصر به ترتیب معمول نمایش داده می شوند. بر این اساس، در مورد ما، کانتینرها به ترتیب (در جریان استاندارد HTML) مرتب می شوند:
اجازه دهید به شما یادآوری کنم که برای سازماندهی و بهینه سازی شیوه نامه های آبشاری در CSS، قانونی برای فرزندان وجود دارد که ویژگی های والد را داشته باشند. بنابراین، در این حالت، تگ های بلوک موقعیتی با لایه صفر و درون عنصر والد اشغال می کنند.
چی شد؟ پس از اعمال موقعیت مطلق برای یک عنصر خاص، تمام بلوک های دیگر صفحه وب دیگر متوجه آن نمی شوند و طوری رفتار می کنند که گویی وجود ندارد. علاوه بر این، ما هنوز مقادیر افست را با استفاده از چپ، راست، بالا و (یا) پایین نشان نداده‌ایم.
و در این حالت، پس از اعمال پارامتر مطلق به آن، عنصر وب در جای خود باقی می ماند، در حالی که همسایه آن (در مثال ما، بلوک رنگی پایین) به سمت بالا حرکت می کند. در نتیجه یک عنصر روی عنصر دیگر قرار می گیرد. بیایید اکنون سعی کنیم حاشیه سمت چپ را برای یک عنصر وب کاملاً در موقعیت سمت چپ: 0 مشخص کنیم، در نتیجه این را دریافت می کنیم:
بنابراین، اگر مقدار صفر را برای padding مشخص کنید، عنصر وب با پارامتر موقعیت‌یابی مطلق فراتر از والد رفته و به لبه پنجره مرورگر می‌چسبد. بسته به مجموعه ویژگی (چپ، راست، بالا، پایین) این حد چپ، راست، بالا یا پایین خواهد بود.
علاوه بر این، باید توجه داشت که چپ نسبت به راست برتری دارد و بالا نسبت به پایین. اگر آنها با یکدیگر تضاد داشته باشند، مقادیر سمت راست و پایین به ترتیب نادیده گرفته می شوند. بیایید ادامه دهیم. مرحله بعدی نوشتن یک مقدار مثبت برای سمت چپ ظرف بالایی است:
در این حالت یک افست در سمت راست لبه سمت چپ viewport وجود خواهد داشت که توسط تگ سند HTML تعریف می شود. بیایید هنگام تعیین موقعیت مطلق یک عنصر وب، برخی از ویژگی های رفتار یک عنصر وب را سیستماتیک و نقطه به نقطه یادداشت کنیم:
- اگر ابعاد بلوک به صراحت توسط عرض و ارتفاع مشخص نشده باشد، آنگاه با ابعاد محتوا، از جمله مقادیر حاشیه و بالشتک مطابقت دارد.
- اگر یک عنصر وب دارای مقادیر چپ، راست، بالا یا پایین نباشد، موقعیت خود را تغییر نخواهد داد.
- همانطور که قبلاً گفته شد، چپ بر راست اولویت دارد و بالا بر پایین.
- اگر یک مقدار منفی سمت چپ یا بالا را به یک عنصر اختصاص دهید، بلوک به خارج از viewport می رود. نوار اسکرول ظاهر نخواهد شد. این تفاوت ظریف را می توان برای حذف یک عنصر وب از دید استفاده کرد.
- اگر سمت چپ به مقداری بیشتر از عرض درگاه دید مشخص شده باشد، یا اگر سمت راست یک مقدار منفی مشخص شده باشد، پیمایش افقی ظاهر می شود. همین امر در مورد جفت بالا و پایین نیز صدق می کند.
- عرض یک بلوک با موقعیت مطلق با استفاده از چپ و راست تشکیل می شود، اما تنها زمانی که عرض مشخص نشده باشد. به طور مشابه، ارتفاع یک عنصر با استفاده از بالا، پایین و ارتفاع تشکیل می شود.
- یک عنصر وب با پارامتر مطلق هنگام پیمایش صفحه به طور همزمان با صفحه حرکت می کند
فکر می‌کنم همه چیز را در مورد موقعیت‌یابی مطلق مرتب کرده‌ام و می‌توانید خودتان تعیین کنید که عناصر با این ویژگی چه کاربرد عملی دارند. با این حال، به عنوان اطلاعات، می گویم که با استفاده از ویژگی position با مقدار مطلق، می توانید بلوک هایی با فریم ها را با افزودن یک قانون سرریز با پارامتر auto ایجاد کنید. همچنین گزینه ای برای دریافت نکات ابزار برای عکس ها یا تصاویر وجود دارد.
موقعیت نسبی
اگر عنصری با ویژگی موقعیتی که به آن پارامتر نسبی اختصاص داده شده است به چپ، راست، بالا یا پایین تنظیم شود، مکان خود را نسبت به موقعیت اصلی خود تغییر خواهد داد. علاوه بر این، یک مقدار مثبت سمت چپ، عنصر وب را به سمت راست مرز چپ، و یک مقدار منفی، عنصر وب را به سمت چپ حرکت می‌دهد. جابجایی های مشابه هنگام اعمال ویژگی بالا، فقط در صفحه عمودی (در مورد مقدار مثبت پایین، منفی - بالا) رخ می دهد:
برای مثالی که به وضوح تأثیر این نوع ویژگی موقعیت را نشان می‌دهد، بیایید دو کانتینر را در نظر بگیریم که یکی از آنها با استفاده از خاصیت float:left به سمت چپ منتقل می‌شود و محتوای متن ظرف دوم در اطراف جریان می‌یابد. این بلوک برای وضوح، اجازه دهید به این عناصر یک پس‌زمینه، ابعاد با استفاده از عرض و ارتفاع، و همچنین حاشیه‌های لازم با استفاده از ویژگی margin بدهیم:
شبیه این خواهد شد:
اکنون موقعیت را نسبت به قانون CSS برای بلوک اول اضافه می کنیم، همچنین به سمت راست (چپ) و پایین (بالا) موقعیت را اضافه می کنیم تا موقعیت نسبی نتیجه را ایجاد کند:
در نتیجه، ظاهر حاصل به این صورت خواهد بود:
همانطور که می بینید، بلوک با توجه به پارامترهای مشخص شده جابجا شده است. با این حال، عنصر مجاور به این امر واکنش نشان نداد و متن همچنان در اطراف ظرف منتقل شده جریان دارد، گویی در جای اصلی خود باقی مانده است.
با کمک مثال ارائه شده، فکر می کنم روشن است که موقعیت یابی نسبی چگونه کار می کند، اما یافتن کاربرد عملی در شکل خالص آن دشوار است. از این منظر، گزینه تعامل بین پارامترهای مطلق و نسبی بسیار مورد تقاضا است که در ادامه به آن خواهیم پرداخت.
استفاده از موقعیت مطلق و نسبی با هم
حال بیایید در نظر بگیریم که با استفاده از دو نوع موقعیت یابی در ترکیب به چه نتایجی می توان دست یافت. اگر مقدار را نسبت به عنصر والد و مطلق را به عنصر فرزند اختصاص دهید، سیستم مختصات جایگزین می شود و مکان عنصر وب فرزند نسبت به والد آن تعیین می شود:
به عنوان مثالی از استفاده عملی از این ترکیب دو نوع موقعیت‌یابی، وبلاگ خود را به شما می‌دهم، جایی که اخیراً همپوشانی عنوان و توضیحات را روی تصویر هدر پیاده‌سازی کرده‌ام. در ابتدا تصویر به این صورت بود:
برای اجرای وظیفه، موارد زیر را انجام دادم. ابتدا، من در STYLE.CSS موضوع خود، ویژگی موقعیت نسبی را برای کلاس "site-header" تگ والد HEADER نوشتم:
همچنین، برای خروجی صحیح، باید عرض بلوک را با کلاس "site-description" با تعیین مقدار عرض تعیین کنم:
سپس، برای کلاس «سایت-برندینگ» از کانتینر فرزند، موقعیت مطلق و حاشیه‌های چپ و بالا را مشخص کردم، که مکان عنصر را در این مورد نه به صورت مطلق (در رابطه با پنجره مرورگر) تعیین می‌کند. ، اما نسبت به محل والد.
همچنین لازم بود ویژگی "text-align:center" از مجموعه قوانین CSS برای این تگ حذف شود تا عنوان و متن توضیحات در سمت چپ تراز شوند. در نتیجه این تعامل موقعیت نسبی و مطلق، مشکل حل شد و متن مورد نیاز در قالب عنوان وبلاگ و توضیحات بر روی تصویر هدر قرار گرفت:
علاوه بر مثالی که من پیشنهاد کردم، با استفاده از پیوند مطلق نسبی، می‌توانید به طور کلی چنین کارهایی را اجرا کنید که شامل ظاهر و ناپدید شدن برخی عناصر وب است. علاوه بر این، در این صورت آنها با نمایش صحیح اجزای باقیمانده از صفحه وب تداخلی ندارند.
یک مورد خاص می تواند برای مثال ایجاد یک منوی کشویی در یک وب سایت باشد. اینجوری کار میکنه اگر نشانگر ماوس را به آیتم منوی اصلی ببرید، یک بلوک کاملاً در موقعیت ظاهر می شود که بر اساس HTML استاندارد ساخته شده است. ظاهر آن با این واقعیت تضمین می شود که پارامتر نسبی ویژگی موقعیت به تگ مربوطه اختصاص داده می شود.
موقعیت ثابت شد
خوب، آخرین پارامتر ویژگی position به رفع المان های وب ضروری در صفحه کمک می کند. در اصل، این نوع موقعیت یابی بسیار شبیه به موقعیت یابی مطلق است، تنها تفاوت آن در این است که یک عنصر با مقدار ثابت با استفاده از چپ، راست، بالا، پایین به ناحیه خاصی از صفحه در پنجره مرورگر متصل می شود. حتی زمانی که صفحه را اسکرول می کنید در جای خود باقی می ماند.
یک مثال بسیار گویا مطالب مربوط به استفاده از موقعیت ثابت است که می توانید با مراجعه به صفحه با استفاده از پیوند ارائه شده در مورد آن مطالعه کنید. توصیه می کنم با این مطالب آشنا شوید، حتی اگر قصد ندارید چنین نوار ناوبری را در منبع وب خود پیاده سازی کنید، زیرا این مثال بسیار گویا است و به درک ماهیت موقعیت یابی ثابت کمک می کند.
علاوه بر پیاده سازی یک منوی شناور، موقعیت ثابت برای ایجاد انواع مختلف سربرگ ها، تب ها و تصاویر استفاده می شود. در یک کلام، ایمن سازی بلوک هایی در یک صفحه وب که از نظر بهبود ویژگی های رفتاری کاربران، افزایش تبدیل یک پروژه تجاری و غیره بیشترین اهمیت را دارند.
این نشریه به نتیجه منطقی خود رسیده است. در مقاله بعدی، من قصد دارم به تفاوت های ظریف استفاده از ویژگی، که مقادیر آن بر موقعیت بلوک های قرار گرفته در یک صفحه وب تأثیر می گذارد، بپردازم. در واقع این ادامه مطالب امروز خواهد بود. در خاتمه یادآوری می‌کنم که می‌توانید با کلیک بر روی دکمه‌های اجتماعی درست در زیر به تلاش نویسنده توجه داشته باشید و نظر خود را در مورد مفید بودن اطلاعات ارائه شده در نظرات بیان کنید.
شرح
نحوه قرارگیری یک عنصر را نسبت به پنجره مرورگر یا سایر اشیاء در صفحه وب تنظیم می کند.
نحو
موقعیت: مطلق | ثابت | نسبی | استاتیک | به ارث می برند
ارزش های
absolute نشان می دهد که عنصر کاملاً در موقعیت قرار دارد و باعث می شود عناصر دیگر در صفحه وب ظاهر شوند که گویی عنصر کاملاً در موقعیت قرار ندارد. موقعیت یک عنصر با ویژگی های چپ، بالا، راست و پایین مشخص می شود و موقعیت نیز تحت تأثیر مقدار ویژگی موقعیت عنصر والد است. بنابراین، اگر مقدار موقعیت والد روی ثابت تنظیم شود یا والد وجود نداشته باشد، مختصات از لبه پنجره مرورگر شمارش می‌شوند. اگر مقدار موقعیت والد ثابت، نسبی یا مطلق باشد، آنگاه مختصات از لبه عنصر والد شمارش می‌شوند. ثابت در عمل خود، این مقدار نزدیک به مطلق است، اما بر خلاف آن، به نقطه ای از صفحه که توسط ویژگی های چپ، بالا، راست و پایین مشخص شده است گره خورده است و هنگام پیمایش صفحه وب، موقعیت خود را تغییر نمی دهد. اگر موقعیت عنصر روی ثابت باشد و کاملاً در پنجره مرورگر قرار نگیرد، فایرفاکس اصلاً نوارهای پیمایشی را نمایش نمی دهد. اگرچه مرورگر اپرا نوارهای اسکرول را نمایش می دهد، اما به هیچ وجه بر موقعیت عنصر تأثیر نمی گذارد. نسبی موقعیت عنصر نسبت به محل اصلی آن تنظیم می شود. افزودن ویژگی‌های چپ، بالا، راست و پایین، موقعیت عنصر را تغییر می‌دهد و آن را از محل اصلی خود به یک سمت یا طرف دیگر منتقل می‌کند. عناصر استاتیک طبق معمول ارائه می شوند. استفاده از ویژگی های چپ، بالا، راست و پایین هیچ نتیجه ای ایجاد نمی کند. inherit ارزش والد را به ارث می برد.HTML5 CSS2.1 IE Cr Op Sa Fx
نتیجه این مثال در شکل نشان داده شده است. 1.
برنج. 1. استفاده از ویژگی position
مدل شی
document.getElementById("elementID").style.position
مرورگرها
اینترنت اکسپلورر 6 مقدار ثابت را پشتیبانی نمی کند. اینترنت اکسپلورر قبل از نسخه 8.0 از مقدار ارثی پشتیبانی نمی کند.
ویژگی موقعیت CSS مسئول مکان یک عنصر نسبت به سایر عناصر است. اغلب در سبک ها استفاده می شود و توسط همه مرورگرها (اینترنت اکسپلورر، نت اسکیپ، اپرا، سافاری، موزیلا، فایرفاکس، کروم، مرورگر Yandex) پشتیبانی می شود. بیایید یک مثال ساده برای درک مطلب بیاوریم.
مثال 1. کد HTML:
Обычный текст Этот текст ниже на 10 пикселей А этот наоборот выше
После того, как Вы откроете этот пример в окне браузера, должно отобразиться примерно следующее:
Это самый простой пример использования свойства CSS position . Теперь давайте рассмотрим все возможные атрибуты, которые может принимать этот параметр.
Синтаксис CSS position
position : absolute | fixed | relative | static | inherit ;
Примечание: через | перечислены все его возможные значения. Рассмотри каждый параметр в отдельности
1. CSS position: relative
Свойство position: relative - относительное позиционирование. Мы видели пример использования этого элемента чуть выше.
При задании этого параметра, активизируются следующие параметры:
- bottom
- left
- right
Если не указано никаких смещений, т.е.
top : 0px ; bottom : 0px ; left : 0px ; right : 0px ;
то отображение html-элемента происходит на том же месте как и по умолчанию (т.е. без задания relative). Если же указаны смещения, то элемент будет смещен относительно своего расположения либо ниже, выше, левее или правее. При этом другие окружающие элементы считают, что никакого смещения нету. Короче говоря, использовать relative имеет смысл только если мы задали смещения.
Для пояснения этой особенности приведем пример.
Примера 2 . HTML-код:
В чем же тогда разница?...
Примера 2* . Добавим к первому диву: position: relative; . HTML-код:
В чем же тогда разница? ...
Код преобразуется в следующее:
Наш красный квадрат переместился на 200 пикселей влево и на 100 пикселей вниз и частично своей площадью закрыл текст. При этом то место, где должен был наш квадрат текст по-прежнему его огибает как будто он там есть.
2. CSS position: absolute
Свойство CSS position: absolute - в данном случае считается, что начало отсчета - левый верхний угол. Здесь также действуют свойства top , bottom , left , right . При этом элемент который обладает атрибутом absolute становится как бы блочным элементом. Приведем пример.
Примера 3 . HTML-код:
Текст один Текст два Текст три
Код преобразуется в следующее:
В данном случае все три текста написаны друг за другом. Заметим, что мы специально сделали отступ слева padding-left:100px; в 100 пикселей. Теперь рассмотрим, что будет если мы во второй font добавим атрибут position: absolute .
Примера 3* . HTML-код:
Текст один Текст два Текст три
Код преобразуется в следующее:
Заметим, что текст два уехал влево и теперь стоит на первой позиции. При этом текст три занял место второго. Почему так произошло? Потому что мы добавили position:absolute и отступ слева: left:0px . Как я писал выше, при атрибуте absolute начало отсчета для элемента становится - левый верхний угол.
3. CSS position: fixed
Свойство CSS position: fixed - фиксированное расположение элемента, даже при прокрутке скролла. Пожалуй, это один из самых распространенных вариантов использования position. Если при этом заданы параметры top и left, то элемент будет размещен относительно левого верхнего угла. Если же параметры не указаны, то он будет фиксироваться в таком положении, как он встретиться на странице. Приведем пример.
Примера 4. HTML-код:
Фиксированный текст
Тут идет текст текст текст
Тут идет текст текст текст ...
Код преобразуется в следующее:
В данном примере верхняя строчка с текстом "фиксированный текст" всегда видна на странице браузера в любом положении скролла. Это свойство часто используют сайты, которые размещают рекламные строчки типо NOLIX, DAOS и т.п. См. как сделать строку как NOLIX и DAOS .
4. Остальные значения CSS position
4.1. Свойство position: static - этот параметр стоит по умолчанию. Параметры left, top, right и bottom не работают при этом значении.
4.2. Свойство position: inherit - наследование значение родителя. Т.е. смотрится ближайший элемент, в который заключен этот html-элемент и наследуется его значение.
Для обращения к position из JavaScript нужно писать следующую конструкцию:
document.getElementById("elementID").style.position ="VALUE "
Свойство position
имеет следующие значения
static relative absolute fixed
Только совместно с ним применяются свойства (искл. position: static;)
top bottom right left
Одновременно могут присутствовать
margin transform float (искл. position: absolute; и position: fixed;)
یک تگ خالی قبل از div با class="primer" - اضافه کنید.
معرفی
عناصر موجود در یک صفحه وب فضای مشخصی را اشغال می کنند. با قیاس با کشتی ها در بازی "نبرد". بین کشتی ها باید سلول های خالی وجود داشته باشد - حاشیه.
برای قرار دادن یک عنصر روی عنصر دیگر، باید یک مقدار منفی برای حاشیه تعیین کنید. اما پس از آن محتویات تگ ها روی یکدیگر همپوشانی دارند. با استفاده از موقعیت و خواص، به نظر می رسد آنها به سطح 2 ارتقا یافته اند.
به ترتیب طبیعی، تگ های پایینی در کد بالای تگ های بالایی نشان داده می شوند. به لطف z-index در سطح 2، می توانید عنصر قابل مشاهده را خودتان تعریف کنید.
استاتیک موقعیت - موقعیت: استاتیک;
موقعیت: استاتیک پیش فرض است و نسبی، مطلق و ثابت را لغو می کند. مقادیر ویژگی های بالا، پایین، راست، چپ نادیده گرفته می شوند. اگر تبدیل وجود نداشته باشد، z-index در نظر گرفته نمی شود.
موقعیت نسبی - موقعیت: نسبی;
بلوکی که موقعیت: relative را به آن اختصاص می دهیم در اولویت قرار می گیرد. محتوای عنصر پایین پنهان است.
برای قرار دادن بلوک B در بالای B، اما زیر A، اختصاص موقعیت: نسبت به آن کافی نیست، زیرا در کد زیر بلوک A است، به این معنی که با آن همپوشانی خواهد داشت.
همچنین باید z-index برای عنصر B کمتر از بلوک A باشد.
به جای حاشیه برای موقعیت نسبی، گاهی اوقات بهتر است از ویژگی های بالا، پایین، راست، چپ استفاده کنید. نقطه شروع برای آنها موقعیت اولیه عنصر است. در همان زمان، بلوک B همچنان به موقعیت خود ادامه می دهد که گویی بلوک A در همان مکان است - فضای خالی برای آن باقی می گذارد. بنابراین، شما مجبور نیستید با یک div() خالی هیچ جادویی انجام دهید.
قیاس کامل با ملک
برای عناصر درون خطی
عناصر حاشیه داخلی به پایین یا بالا منتقل نمی شوند (). فقط بالا، پایین
B A B
موقعیت یابی مطلق و ثابت
به نظر می رسد بلوکی با موقعیت: مطلق باید بالای موقعیت: نسبی قرار گیرد، اما اینطور نیست، نظم طبیعی در اینجا اعمال می شود. این به این معنی است که z-index به شما امکان می دهد یک عنصر اولویت را بین آنها انتخاب کنید.
بلوک B موقعیت اصلی بلوک B را نادیده می‌گیرد، زیرا با موقعیت: مطلق و موقعیت: ثابت، عنصر از طریق عرض/ارتفاع یا از طریق شناور: چپ، تأثیر بر برچسب‌های همسایه را متوقف می‌کند.
جدول پایانی
| خواص متمایز | موقعیت: استاتیک | موقعیت: نسبی; transform: translate(); | موقعیت: مطلق; | موقعیت: ثابت؛ |
| پوشش | بهتر است عناصر را روی هم قرار ندهید | المان ها دارای اولویت دید نسبت به استاتیک هستند. معانی دیگر معادل هستند. کسی که در کد پایین تر است یا مقدار z-index بالاتری دارد قابل مشاهده خواهد بود. | ||
| نقطه مرجع بالا، راست، پایین و چپ | نادیده گرفته شده است | موقعیت اولیه عنصر | لبه عنصر والد | لبه پنجره مرورگر |
| عناصر اطراف | موقعیت فعلی عنصر را در نظر بگیرید | موقعیت اولیه عنصر را در نظر بگیرید | نادیده گرفتن موقعیت عنصر | |
| عرض: 100%؛ این عرض است | عنصر (برای درون خطی) / عنصر والد (برای سطح بلوک) | عنصر والد با موقعیتی که روی استاتیک تنظیم نشده است | پنجره مرورگر | |
| هنگام پیمایش عنصر صفحه | حرکت می کند | به یک مکان مشخص در پنجره مرورگر می چسبد | ||
اکنون، برای ادغام مطالب، روی دکمه های ابتدای مقاله کلیک کنید، به این فکر کنید که چرا چنین تغییراتی رخ داده است.
