موقعیت یابی CSS: چیست و کجا استفاده می شود؟ تعیین موقعیت عناصر HTML

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

• سمت چپ - برای تنظیم فاصله در پیکسل از لبه سمت چپ پنجره (مختصات x)؛
• بالا - برای تنظیم فاصله بر حسب پیکسل از لبه بالایی پنجره (مختصات y)؛
• z-index - برای نشان دادن ترتیبی که عناصر با یکدیگر همپوشانی دارند. این یک بعد جدید است، عناصر با شاخص z بزرگتر در بالای عناصر با شاخص z کوچکتر ظاهر می شوند.

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

• مطلق - ویژگی های چپ و بالا مشخص شده، عنصر را در نقطه ای با مختصات x و y نسبت به گوشه سمت چپ بالای ظرف قرار می دهد (شئی حاوی این عنصر). اگر آنها برای عنصری خارج از ظرف تعریف شده باشند، آنگاه مبدا مختصات گوشه سمت چپ بالای صفحه خواهد بود. توجه داشته باشید که موقعیت یک عنصر به موقعیت تگ آن در سند HTML بستگی ندارد.
• نسبی - عنصر با توجه به جایی که در آن قرار دارد نصب می شود متن منبعاو در این مقدار به صورت پیش فرض تنظیم شده است. به عنوان مثال، اگر عنصری از ابتدای انتخاب خود در متن سند سه خط قرار داشته باشد، به طور پیش فرض ویژگی موقعیت یابی نسبی در نظر گرفته می شود و ویژگی های مختصات چپ و بالا به صورت نسبی در نظر گرفته می شود. مقادیر صفر. مقادیر غیر صفر ویژگی های چپ و بالا، تغییر عنصر را نسبت به آن تنظیم می کند محل شروع;
• ثابت - عنصر در موقعیت خاصی نسبت به پس زمینه قرار می گیرد و هنگام پیمایش صفحه حرکت نمی کند.

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

تثبیت موقعیت




متن موقعیت یابی شده nepBbiu

برنج. 666. استفاده از ویژگی i-index به شما امکان می دهد ترتیب طبیعی عناصر را در متن یک سند HTML تغییر دهید.

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

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

که در مثال زیراستفاده شده دارایی سرریزبرای ایجاد مکانیزم پیمایش برای متن اول.

تثبیت موقعیت




متن قرار داده شده riepBbiM

متن موقعیت دوم

برنج. 667. مکانیزم اسکرول متن، با استفاده از ویژگی سرریز پیاده سازی شده است

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

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

برنج. 668. نمونه ای از ایجاد متن سه بعدی با با استفاده از CSS

افکت سه بعدی

P (فونت-خانواده: "sans-serif"؛ اندازه قلم: 96، -رنگ: قرمز)
هایلایت P. (رنگ: نقره ای)
سایه P. (رنگ: تیره)

متن حجمی"

متن حجمی

متن حجمی

لطفا توجه داشته باشید که این روش ایجاد سرفصل های موثر بسیار مقرون به صرفه تر از استفاده است فایل های گرافیکیبا محتوای مشابه

موقعیت را تنظیم کنید

موقعیت از پیش تعیین شده

فرهنگ لغت انگلیسی - روسیاصطلاحات فنی. 2005.

ببینید «موقعیت تعیین شده» در فرهنگ‌های دیگر چیست:

نصب در یک موقعیت معین - — [A.S. فرهنگ لغت انرژی انگلیسی - روسی. 2006] مباحث انرژی در موقعیت عمومی EN ...

نصب در یک موقعیت معین - موقعیت یابی - [Ya.N.Luginsky، M.S.Fezi Zhilinskaya، Yu.S.Kabirov. فرهنگ لغت انگلیسی-روسی مهندسی برق و مهندسی قدرت، مسکو، 1999] موضوعات مهندسی برق، مفاهیم اساسی مترادف موقعیت EN موقعیت ... مرجع مترجم فنی

Situation - Situation ♦ Situation Situation یکی از 10 مقوله ارسطو در نظر گرفته می شود. در این صورت به معنای همان مکان یا مقام (مکان و مقام) است. در یک مفهوم رایج، موقعیت یک موجود سهمی است که توسط... ... فرهنگ لغت فلسفی اسپونویل اشغال می شود.

RD 153-34.0-09.161-97: مقررات مربوط به مشخصه های انرژی استاندارد واحدهای هیدرولیک و نیروگاه های برق آبی - اصطلاحات RD 153 34.0 09.161 97: مقررات مربوط به ویژگی های انرژی استاندارد واحدهای هیدرولیک و نیروگاه های برق آبی: ارتفاع مکش فاصله ارتفاعات. از صفحه افقی معمولی توربین و سطح آب دنباله Hs m تعریف شده ...

حرکت - انتقال 3.14 (در رابطه با مکان ذخیره سازی): تغییر مکان ذخیره یک سند. منبع: GOST R ISO 15489 1 2007: System of Standards for Information... دیکشنری-کتاب مرجع اصطلاحات اسناد هنجاری و فنی

GOST 22267-76: ماشین آلات برش فلز. طرح ها و روش های اندازه گیری پارامترهای هندسی - اصطلاحات GOST 22267 76: ماشین آلات برش فلز. طرح ها و روش های اندازه گیری پارامترهای هندسیسند اصلی: 25.1. روش های اندازه گیری روش 1 با استفاده از دستگاه اندازه گیری طول در حرکت مستقیمبدنه کار روش 2... ... فرهنگ-مرجع کتاب اصطلاحات اسناد هنجاری و فنی

GOST 18101-85: ماشین های فرز طولی. هنجارهای دقت و صلبیت - اصطلاحات GOST 18101 85: ماشین های فرز طولی. استانداردهای دقت و صلبیت سند اصلی: 1.2.5. موازی بودن دو طرف شیار راهنما (لبه کنترل) میز با مسیر حرکت آن. 13 جدول 5 طول... ... فرهنگ-مرجع کتاب شرایط اسناد هنجاری و فنی

مکانیکی، الکتریکی یا دستگاه الکترونیکی، امکان استفاده غیرمجاز از هر چیزی را محدود می کند. قفل را می توان توسط یک وسیله (کلید) در اختیار شخص خاصی فعال کرد، اطلاعات ... ... دایره المعارف Collier's

حرکت تحت بار میز نسبت به سنبه ثابت در دوک عمودی - 3.2.1. حرکت تحت بار میز نسبت به سنبه ثابت در دوک عمودی: الف) ج جهت عمودی(در امتداد محور Z)؛ ب) در جهت افقی (در امتداد محور Y). چرندیات. 67 جدول 35 عرض سطح کار میز، میلی متر... ... فرهنگ اصطلاحات اسناد هنجاری و فنی

GOST 29108-91: دستگاه های نیمه هادی. ریز مدارهای یکپارچه بخش 3. مدارهای مجتمع آنالوگ - اصطلاحات GOST 29108 91: دستگاه های نیمه هادی. ریز مدارهای یکپارچه قسمت 3. آنالوگ مدارهای مجتمعسند اصلی: 2.2.4.3. زمان بازیابی ولتاژ ورودی فاصله زمانی از یک تغییر گام معین... ... فرهنگ اصطلاحات اسناد هنجاری و فنی

GOST 9152-83: ماشین های برش دنده برای چرخ های اریب با دندانه های دایره ای. هنجارهای دقت و استحکام - اصطلاحات GOST 9152 83: ماشین های برش دنده برای چرخ های اریب با دندانه های دایره ای. استانداردهای دقت و صلبیت سند اصلی: 1.3.1. فاصله A+D بین انتهای فلنج سنج و انتهای دوک. تعاریف اصطلاح از اسناد مختلف... فرهنگ-مرجع کتاب اصطلاحات اسناد هنجاری و فنی

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

انواع آن چیست

اگر در مورد مکان یابی عناصر بلوک صحبت کنیم، با استفاده از ویژگی position تنظیم می شود. چهار معنا دارد و هر کدام جای تأمل جداگانه دارد.

موقعیت یابی مطلق

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

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

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

بلوک (موقعیت: مطلق؛ پایین: 0؛ سمت راست: 0؛ )

مسدود کردن ( موقعیت: مطلق; پایین: 0; سمت راست : 0 ;

عنصر به گوشه پایین سمت راست منتقل می شود. متوجه می شوم که آنها اغلب دکمه بالایی را به این صورت انجام می دهند - آن را کاملاً در گوشه قرار می دهند. در اینجا مثال دیگری وجود دارد که در آن ابتدا نشانه گذاری احتمالی را نشان می دهم:

< div id = "wrapper" > < div class = "block" > < / div > < / div >

و حالا استایل های css برای این قطعه:

#wrapper( موقعیت: نسبی؛ ) .block( موقعیت: مطلق؛ بالا: 0؛ سمت راست: 10 پیکسل؛ )

#لفافه( موقعیت: نسبی; مسدود کردن ( موقعیت: مطلق; بالا: 0; سمت راست: 10 پیکسل

در این مثال ابتدا به کانتینر والد نوشتیم موقعیت یابی نسبی(نسبی - بیشتر در مورد آن در ادامه مقاله)، و سپس برای همان element.block آنها مطلق را تنظیم می کنند. در نتیجه، مختصات نه از خود پنجره مرورگر، بلکه از لبه های عنصر والد، یعنی بلوک wrapper، شمارش می شود.

موقعیت یابی نسبی عناصر css

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

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

همچنین مهم است بدانید که افست از لبه‌های پنجره مرورگر وب رخ نمی‌دهد، بلکه از جایی که بلوک در ابتدا قرار داشت، رخ می‌دهد. به این معنا که:

بلوک (موقعیت: نسبی؛ بالا: 10 پیکسل؛ سمت راست: 50 پیکسل؛ )

مسدود کردن ( موقعیت: نسبی; بالا: 10px; سمت راست: 50 پیکسل

بلوک 50 پیکسل به سمت راست و 10 پیکسل به چپ حرکت می کند.

تثبیت

احتمالاً بیش از یک بار در سایت‌های اینترنتی دیده‌اید که هنگام پیمایش، برخی از بنرها ناپدید نشدند، اما همچنان در منطقه دید شما قرار داشتند، گویی به یک مکان چسبیده بودند. این عمدتا با استفاده از موقعیت یابی ثابت اجرا می شود. برای این کار باید بنویسید:

موقعیت: موقعیت استاتیک ایستا یا عادی

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

چگونه بلاک ها را در css به درستی قرار دهیم؟

ما در مورد معانی بحث کرده ایم، اما این برای بستن این موضوع برای خود کافی نیست. در واقع، شما باید بدانید که کجا و چه نوع موقعیت‌یابی باید اعمال شود. من قبلاً برای شما مثالی با fixed آورده‌ام - می‌توان از آن برای ایجاد ستون‌های کناری چسبنده، سرصفحه یا پاورقی استفاده کرد.

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

تکنیک های دیگر: مرکز، بلوک های شناور

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

گریدها اغلب با استفاده از شناورها در CSS ساخته می شوند. این ویژگی به شما امکان می دهد یک بلوک را به لبه چپ یا راست والد فشار دهید (شناور: چپ، شناور: راست)، اجازه می دهد چندین مورد عناصر بلوکدر یک صف بایستید، که همیشه در هر سایتی اتفاق می افتد.

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

همه انواع موقعیت یابی که در این مقاله ذکر شده است می تواند برای یک توسعه دهنده وب مفید باشد. در جایی باید یک نماد را وارد کنید (موقعیت: مطلق)، در جایی باید کمی موقعیت بلوک را تنظیم کنید و مقداری فضای پشت آن بگذارید (موقعیت: نسبی) و در جایی باید ویجت را تعمیر کنید (موقعیت: ثابت). به طور کلی، آگاهی از این ویژگی قطعاً اضافی نخواهد بود.

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

ولاد مرژویچ

موقعیت یابی موقعیت یک عنصر در یک سیستم مختصات است. چهار نوع موقعیت وجود دارد: عادی، مطلق، ثابت و نسبی. بسته به نوع که از طریق ویژگی position تنظیم می شود، سیستم مختصات نیز تغییر می کند.

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

موقعیت یابی عادی

اگر ویژگی موقعیت یک عنصر تنظیم نشده باشد یا مقدار آن ثابت باشد، عنصر در جریان سند به صورت عادی نمایش داده می شود. به عبارت دیگر، عناصر به ترتیبی که ظاهر می شوند در صفحه نمایش داده می شوند کد منبع HTML.

ویژگی های چپ، بالا، راست، پایین، در صورت تعریف، نادیده گرفته می شوند.

موقعیت یابی مطلق

با موقعیت یابی مطلق، عنصر در جریان سند وجود ندارد و موقعیت آن نسبت به لبه های مرورگر تنظیم می شود. می توانید این نوع را از طریق مقدار مطلق ویژگی position تنظیم کنید. مختصات نسبت به لبه‌های پنجره مرورگر مشخص می‌شوند که «منطقه قابل مشاهده» نامیده می‌شود (شکل 3.42).

برنج. 3.42. مقادیر ویژگی چپ، راست، بالا و پایین برای موقعیت یابی مطلق

حالت با ویژگی های زیر مشخص می شود.

• عرض لایه، مگر اینکه به طور صریح مشخص شده باشد، برابر است با عرض محتوا به اضافه مقادیر حاشیه، حاشیه و padding.
• یک لایه موقعیت اصلی خود را تغییر نمی دهد مگر اینکه دارای ویژگی های راست، چپ، بالا و پایین باشد.
• ویژگی های چپ و بالا بر ویژگی های راست و پایین اولویت دارند. اگر چپ و راست با هم تضاد داشته باشند، ارزش راست نادیده گرفته می شود. در مورد پایین هم همینطور.
• اگر سمت چپ روی مقدار منفی تنظیم شود، لایه فراتر از لبه سمت چپ مرورگر می رود و نوار اسکرول ظاهر نمی شود. این یکی از راه‌های پنهان کردن یک عنصر از دید است. همین امر در مورد ویژگی top صدق می کند، فقط لایه از لبه بالایی فراتر می رود.
• اگر سمت چپ روی مقداری بیشتر از عرض ناحیه قابل مشاهده تنظیم شده باشد یا سمت راست با آن مشخص می شود ارزش منفی، پدیدار خواهد شد نوار افقیطومار. قانون مشابهبا بالا نیز کار می کند، اما در مورد آن صحبت خواهیم کرد نوار عمودیطومار.
• در همان زمان، خصوصیات سمت چپ و راست مشخص شده، عرض لایه را تشکیل می دهند، اما فقط در صورتی که عرض مشخص نشده باشد. ارزش افزودن را دارد ویژگی عرضو مقدار حق نادیده گرفته خواهد شد. در مورد ارتفاع لایه نیز همین اتفاق می افتد، فقط ویژگی های top، bottom و height درگیر هستند.
• یک عنصر با موقعیت مطلق در حین حرکت با سند حرکت می کند.

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

مثال 3.31. ایجاد یک آنالوگ از فریم ها

بدنه موقعیت یابی مطلق ( حاشیه: 0؛ ) #نوار کناری، #محتوا (موقعیت: مطلق؛ ) #نوار کناری، #محتوا ( سرریز: خودکار؛ بالشتک: 10 پیکسل؛ ) #هدر ( ارتفاع: 80 پیکسل؛ /* ارتفاع لایه */ پس زمینه: #FEDFC0; حاشیه-پایین: 2px جامد #7B5427 ) #هدر h1 ( بالشتک: 20px؛ حاشیه: 0; ) #نوار کناری (عرض: 150px؛ پس‌زمینه: #ECF5E4؛ حاشیه-راست: 1px جامد #231F20؛ 8px. /* فاصله از لبه بالا */ پایین: 0 /* فاصله از پایین */ ) #محتوا (بالا: 82 پیکسل؛ /* فاصله از لبه بالا */ سمت چپ: 170 پیکسل؛ /* فاصله از لبه سمت چپ; */ پایین: 0 ;

پلو به سبک فرغانه

پلو ازبکی

پلو سیبری

پلو ایتالیایی

پلو استونیایی

پلو به سبک آمریکایی

پلو به سبک هندی

پلو به سبک فرغانه

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

روی برنج را به صورت یک لایه بپوشانید و حرارت را زیاد کنید و بلافاصله در آب بریزید تا 1 تا 1.5 سانتی متر روی برنج را بپوشاند، به محض اینکه آب آن تبخیر شد، با قاشق سوراخ دار پلو را به صورت تپه ای جمع کنید. وسط آن را با چوب در چند جا سوراخ کنید تا آب سطح آن به ته برود. سپس روی پلو را بپوشانید و بگذارید 20 تا 25 دقیقه بماند.

پلو آماده را کاملا مخلوط کرده و به ظرف بزرگی منتقل کرده و گوشت را روی آن قرار دهید.

نتیجه این مثالدر شکل نشان داده شده است. 3.43. لایه هدر طبق معمول در جریان رندر می شود و نوار کناری و لایه های محتوا کاملاً در موقعیت قرار می گیرند.

برنج. 3.43. استفاده از موقعیت یابی مطلق

در IE6، عناصر کاملاً موقعیت‌یافته نمی‌توانند ویژگی‌های چپ، راست و بالا، پایین را به طور همزمان داشته باشند.

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

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

مثال 3.32. سبک راهنمای ابزار

#floatTip ( موقعیت: مطلق؛ /* موقعیت یابی مطلق */ عرض: 250 پیکسل؛ /* عرض بلوک */ نمایش: هیچکدام؛ /* پنهان شدن از نمایشگر */ حاشیه: 1px جامد #000؛ /* پارامترهای قاب */ بالشتک: 5 پیکسل /* حاشیه های اطراف متن */ font-family: sans-serif /* font-size: 9pt; /* رنگ پس زمینه */ )

خود اسکریپت از دو تابع تشکیل شده است - moveTip() حرکت ماوس را ردیابی می کند و موقعیت لایه را مطابق با مختصات مکان نما تغییر می دهد و toolTip() دید لایه را کنترل می کند و متن مورد نظر را در آن نمایش می دهد (مثال 3.33).

مثال 3.33. اسکریپت خروجی لایه

Document.onmousemove = moveTip; تابع moveTip(e) ( floatTipStyle = document.getElementById("floatTip").style; w = 250; // عرض لایه // برای مرورگر اینترنت اکسپلورر if (document.all) (x = event.x + document.body.scrollLeft y = event.y + document.body.scrollTop // برای سایر مرورگرها ) else ( x = e.pageX ; // X مختصات مکان نما y = e.pageY ; // مختصات Y مکان نما ) // اگر ((x + w + 10) لایه را در سمت راست مکان نما نشان دهید< document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; floatTipStyle.display = "block"; // Показываем слой } else { floatTipStyle.display = "none"; // Прячем слой } }

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

مثال 3.34. ایجاد یک راهنمای ابزار

راهنمای ابزار #floatTip (موقعیت: مطلق؛ عرض: 250 پیکسل؛ نمایشگر: هیچ‌کدام؛ حاشیه: 1 پیکسل ثابت #000؛ بالشتک: 5 پیکسل؛ خانواده قلم: sans-serif؛ اندازه قلم: 9pt؛ رنگ: #333؛ پس‌زمینه: # ECF5E4 کدورت: 0.85 /* شفافیت لایه */ )

" + "لنز: Canon EF 24-105 f/4L IS USM
" + "فلش: Canon Speedlite 580 EX
" + "سرعت شاتر: 1/125
دیافراگم: 5.6")" onmouseout="toolTip()" />

نتیجه این مثال در شکل نشان داده شده است. 3.44. لطفاً توجه داشته باشید که بسته بندی متن هنگام فراخوانی تابع toolTip() برای اهداف خوانایی است و در نحو جاوا اسکریپت است. در سافاری، اسکریپت گاهی اوقات هنگام بسته بندی متن کار نمی کند، در این صورت متن باید در یک خط نوشته شود. یک ویژگی Opacity CSS3 به استایل ها اضافه شده است که کمی شفافیت به لایه اضافه می کند. این ویژگی در IE قبل از نسخه 9.0 پشتیبانی نمی شود.

برنج. 3.44. راهنمای ابزار با استفاده از جاوا اسکریپت ارائه شده است

موقعیت ثابت

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

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

مثال 3.35. زیرزمین ثابت

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

فوتر ثابت BODY ( حاشیه-پایین: 50 پیکسل؛ ) #پانویس ( موقعیت: ثابت؛ /* موقعیت ثابت */ سمت چپ: 0؛ پایین: 0؛ /* گوشه پایین سمت چپ */ بالشتک: 10 پیکسل؛ /* حاشیه های اطراف متن */ پس زمینه: #39b54a. روش های محاسباتی. نویسنده ایمنی شما را هنگام استفاده از آنها تضمین نمی کند و مسئولیت نتایج را رد می کند. به یاد داشته باشید، شیر یک حیوان درنده و خطرناک است! ولاد مرژویچ

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

برنج. 3.45. پاورقی در پایین صفحه

موقعیت یابی نسبی

تنظیم ویژگی position به relative موقعیت عنصر را نسبت به محل اصلی آن تنظیم می کند. افزودن ویژگی‌های چپ، بالا، راست و پایین، موقعیت عنصر را تغییر می‌دهد و آن را از محل اصلی خود به یک سمت یا طرف دیگر منتقل می‌کند. یک مقدار مثبت سمت چپ یک تغییر به سمت راست از مرز چپ عنصر را مشخص می کند، یک مقدار منفی یک تغییر به سمت چپ را مشخص می کند. یک مقدار مثبت بالا یک تغییر به سمت پایین عنصر را مشخص می کند (شکل 3.46)، یک مقدار منفی یک تغییر به سمت بالا را مشخص می کند.

برنج. 3.46. مقادیر اموال سمت چپ و بالا برای موقعیت نسبی

خواص پایین و سمت راست اثر معکوس دارند. با یک مقدار مثبت، سمت راست عنصر را به سمت چپ لبه راست، با یک مقدار منفی، آن را به سمت راست منتقل می کند (شکل 3.47). یک مقدار پایین مثبت عنصر را به سمت بالا حرکت می دهد، یک مقدار پایین منفی آن را به پایین می برد.

برنج. 3.47. مقادیر اموال سمت راست و پایین برای موقعیت یابی نسبی

موقعیت نسبی با ویژگی های زیر مشخص می شود.

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

مثال 3.36 نشان می دهد که متن عنوان در حال حرکت به سمت پایین است تا سبک متفاوتی از نوشتن به آن بدهد.

مثال 3.36. عنوان متن

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

عنوان H1 ( فونت: پررنگ 2em Arial، Tahome، sans-serif؛ /* گزینه های قلم */ رنگ: #fff؛ پس زمینه: #375D4C؛ padding: 0 10px؛ ) H1 SPAN ( موقعیت: نسبی؛ /* موقعیت نسبی */ بالا: 0.3em; /* حرکت به سمت پایین */ ) آز و راش علم قلم

فونت وسیله ای برای بیان طراحی است، نه نوعی خواندن پیش پا افتاده.

نتیجه این مثال در شکل نشان داده شده است. 3.48.

برنج. 3.48. متن را نسبت به موقعیت اصلی خود تغییر دهید

لایه های تو در تو

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

برنج. 3.49. مقادیر ویژگی های چپ، راست، بالا و پایین در لایه های تو در تو

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

متن