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

تعیین موقعیت و حرکت آزاد عناصر

1. انواع موقعیت یابی

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

موقعیت
معنی:
استاتیک	مقدار پیش فرض به معنای عدم موقعیت یابی است. عناصر به ترتیبی که در سند HTML تعریف شده اند به ترتیب یکی پس از دیگری نمایش داده می شوند. برای پاک کردن هر مقدار موقعیت دیگر استفاده می شود.
نسبت فامیلی	یک عنصر نسبتاً قرار گرفته از موقعیت عادی خود به داخل منتقل می شود جهت های مختلفنسبت به مرزهای ظرف والد، و فضای اشغال شده از بین نمی رود. با این حال، چنین عنصری ممکن است با محتوای دیگر در صفحه همپوشانی داشته باشد. اگر ویژگی‌های بالا و پایین یا چپ و راست را برای یک عنصر نسبتاً موقعیت‌یافته همزمان تنظیم کنید، در حالت اول فقط بالا و در حالت دوم چپ کار می‌کند. موقعیت یابی نسبی به شما این امکان را می دهد که یک شاخص z برای یک عنصر تنظیم کنید و همچنین عناصر فرزند را کاملاً در یک بلوک قرار دهید.
مطلق	یک عنصر کاملاً دارای موقعیت کاملاً از جریان سند حذف می شود و نسبت به مرزهای بلوک کانتینری خود (یک عنصر دیگر یا پنجره مرورگر) قرار می گیرد. بلوک کانتینری برای یک عنصر کاملاً دارای موقعیت، نزدیکترین عنصر اجدادی است که مقدار ویژگی موقعیت آن ثابت نیست. محل لبه های یک عنصر با استفاده از خواص افست تعیین می شود. فضای اشغال شده توسط چنین عنصری طوری جمع می شود که گویی آن عنصر در صفحه وجود ندارد. یک عنصر کاملاً دارای موقعیت می تواند با عناصر دیگر همپوشانی داشته باشد یا با آن همپوشانی داشته باشد (به دلیل ویژگی z-index). هر عنصر کاملاً در موقعیت یک بلوک ایجاد می کند، یعنی می گیرد ارزش نمایش:مسدود کردن؛ .
درست شد	یک عنصر را به مکان مشخص شدهصفحات بلوک کانتینر یک عنصر ثابت، viewport است، یعنی عنصر همیشه نسبت به پنجره مرورگر ثابت است و در حین پیمایش صفحه، موقعیت خود را تغییر نمی‌دهد. خود عنصر به طور کامل از جریان سند اصلی حذف شده و در یک جریان سند جدید ایجاد می شود.
اولیه	مقدار یک ویژگی را به مقدار پیش فرض آن تنظیم می کند.
به ارث می برند	مقدار ویژگی را از عنصر والد به ارث می برد.

برنج. 1. تفاوت بین موقعیت استاتیک، نسبی و مطلق

2. خواص جابجایی

ویژگی ها افست را نسبت به نزدیک ترین طرف بلوک ظرف توصیف می کنند. برای عناصری که مقدار ویژگی position برابر با static نیست تنظیم کنید. آنها می توانند هر دو ارزش مثبت و منفی را دریافت کنند. ارثی نیست.

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

3. قرار گرفتن در داخل یک عنصر

بلوک کانتینری یک عنصر کاملاً در موقعیت قرار گرفته روی موقعیت: نسبی و بدون آفست تنظیم شده است. این به شما امکان می دهد عناصر را در یک عنصر ظرف قرار دهید.

.wrap ( بالشتک: 10 پیکسل؛ ارتفاع: 150 پیکسل؛ موقعیت: نسبی؛ پس‌زمینه: #e7e6d4؛ تراز نوشتاری: راست؛ حاشیه: 3 پیکسل با خط چین #645a4e؛ ) .سفید (موقعیت: مطلق؛ عرض: 200 پیکسل؛ بالا: 10 پیکسل؛ چپ : 10px؛ بالشتک: 10px؛ پس‌زمینه: #ffffff؛ حاشیه: 3px چین‌دار #312a22؛ )
برنج. 2. مطلق موقعیت یابی نسبی

4. مشکلات موقعیت یابی

1. اگر عرض یا ارتفاع یک عنصر کاملاً موقعیت‌یافته روی خودکار تنظیم شود، مقدار آن با عرض یا ارتفاع محتوای عنصر تعیین می‌شود. اگر عرض یا ارتفاع به صراحت اعلام شده باشد، این مقدار تخصیص داده می شود.
2. اگر در داخل بلوک با موقعیت: مطلق عناصری برای آنها وجود دارد بسته بندی شناور، سپس ارتفاع این عنصر برابر با ارتفاع بلندترین این عناصر خواهد بود.
3. برای یک عنصر با موقعیت: مطلق یا موقعیت: ثابت، نمی توانید ویژگی float را همزمان تنظیم کنید، اما برای عنصری با موقعیت: نسبی، می توانید.
4. اگر جد عنصر قرار داده شده یک عنصر بلوکی باشد، محفظه بلوک توسط ناحیه محتوای محدود شده توسط مرز تشکیل می شود. اگر جد یک عنصر درون خطی باشد، بلوک کانتینر از مرز بیرونی محتوای آن تشکیل می شود. اگر اجدادی وجود نداشته باشد، عنصر بدن بلوک ظرف است.

5. حرکت آزاد عناصر

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

برنج. 3. حرکت آزادعناصر

یک بلوک شناور محتوای خود را با بالشتک و حاشیه ها تغییر اندازه می دهد. بالا و پایین لبهعناصر شناور فرو نمی ریزند. ویژگی float هم برای عناصر در سطح بلوک و هم برای عناصر درون خطی اعمال می شود.

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

این ویژگی به طور خودکار مقدار محاسبه شده (پردازش شده مرورگر) ویژگی display را برای نمایش تغییر می دهد: block برای مقادیر زیر: inline , inline-block , table-row , table-row-group , table-column , table-column-group , جدول-سلول. جدول-کاپشن، گروه-سرصفحه-جدول، گروه-پایه-جدول. مقدار inline-table به جدول تغییر می کند.

این ویژگی روی عناصر دارای نمایشگر تأثیری ندارد: flex و display: inline-flex .

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

که در آن بالشتک عمودیحاشیه‌های عناصر شناور برخلاف عناصر معمولی سطح بلوک، با لایه‌بندی عناصر مجاور فرو نمی‌روند.

6. عناصر را باز کنید

6.1. دارایی روشن

ویژگی clear تعیین می کند که عنصری که دنبال عنصر شناور است چگونه قرار می گیرد. این ویژگی بسته بندی یک یا هر دو طرف عنصر را لغو می کند. تنظیم ویژگیشناور . قانون (سرریز: پنهان؛) برای جلوگیری از نمایش پس‌زمینه یا حاشیه‌ها در زیر عناصر شناور استفاده می‌شود.

6.2. پاک کردن جریان با استایل ها با استفاده از کلاس clearfix و :after pseudo-class

فرض کنید یک محفظه بلوکی داریم که عرض و ارتفاع مشخصی ندارد. داخل آن یک بلوک شناور با ابعاد مشخص قرار داده شده است.

.container ( بالشتک: 20px؛ پس‌زمینه: #e7e6d4؛ حاشیه: 3px چین‌دار #645a4e؛ ) .floatbox ( شناور: چپ؛ عرض: 300 پیکسل؛ ارتفاع: 150 پیکسل؛ حاشیه سمت راست: 20 پیکسل؛ بالشتک: 0 پس‌زمینه: #20ffffx ؛ حاشیه: 3px با چین #666666؛ ) برنج. 4. "اثر فروپاشی" کانتینر بلوک

راه حل:
یک کلاس .clearfix ایجاد می کنیم و در ترکیب با کلاس :after آن را روی بلوک کانتینر اعمال می کنیم.

.container ( بالشتک: 20px؛ پس‌زمینه: #e7e6d4؛ حاشیه: 3px چین‌دار #645a4e؛ ) .floatbox ( شناور: چپ؛ عرض: 300 پیکسل؛ ارتفاع: 150 پیکسل؛ حاشیه سمت راست: 20 پیکسل؛ بالشتک: 0 پس‌زمینه: #20ffffx ؛ حاشیه: 3px با خط چین #666666; ) .clearfix:after ( محتوا: ""؛ نمایش: بلوک؛ ارتفاع: 0؛ واضح: هر دو؛ نمایان: پنهان؛ )

گزینه دوم برای پاک کردن جریان:

Clearfix:after ( محتوا: ""؛ نمایش: جدول؛ پاک: هر دو؛ )
برنج. 5. اعمال یک روش "روشن" برای یک بلوک ظرف حاوی یک عنصر شناور

6.3. یک راه آسان برای پاک کردن جریان

ترفند دیگری برای پاک کردن جریان برای عنصری که حاوی شناور است، مانند یک لیست افقی گلوله‌دار وجود دارد:

Ul ( حاشیه: 0؛ سبک فهرست: هیچ‌کدام؛ بالشتک: 20 پیکسل؛ پس‌زمینه: #e7e6d4؛ سرریز: خودکار؛ ) li ( شناور: چپ؛ عرض: محاسبه (100% / 3 - 20 پیکسل؛ ارتفاع: 50 پیکسل؛ حاشیه راست: 20 پیکسل؛ پس‌زمینه: #ffffff؛ حاشیه: 3 پیکسل با خط چین #666666؛ ) li:last-child (حاشیه-راست: 0؛) 6. پاک کردن جریان لیست افقی

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

نمونه ورودی سبک:

P (تراز کردن متن: چپ؛ )

مقادیر چپ، راست و وسط متن تراز چپ تقریباً همیشه در صفحات وب خوب به نظر می رسد و خواندن آن آسان است. تراز راست در زبان های اروپایی، به عنوان یک قاعده، به ندرت استفاده می شود، اما نمی توان آن را کاملا بی فایده نامید: این سبک برای طراحی زیباشرح عکس ها یا نقل قول ها، تراز کردن محتویات سلول های جدول یا قطعات کوچک متن. مرکز اغلب برای همین منظور استفاده می شود. می توان از مقدار justify Justify متن در CSS (justify) استفاده کرد نسخه های چاپیصفحات، اما توصیه نمی شود که در صفحات وب ایجاد شده برای مشاهده روی مانیتور، با این سبک فریب بخورید. چرا؟ در نگاه اول، متن توجیه شده زیبا و یکنواخت به نظر می رسد، مانند ستونی در روزنامه. اما برای گسترش متن به این صورت، مرورگر باید اضافه کند فضای اضافیبین کلمات و در نتیجه شکاف های زشتی در متن ایجاد می شود که خواندن آن را دشوار می کند. در برنامه های طراحی شده برای آماده سازی داده ها برای چاپ، موارد بسیار بیشتری وجود دارد تنظیم دقیقفاصله در متن، و همچنین اغلب استفاده می شود واژه نامه، که در بسیاری از مرورگرها نیست. بنابراین، لازم است بررسی کنید که متن موجه در صفحات وب چگونه به نظر می رسد و قبل از هر چیز از خود این سوال را بپرسید: آیا خواندن آن آسان است؟ این به ویژه برای بلوک های باریک متن (از جمله نسخه های موبایلصفحات). مقادیر start و end مقادیر start و end برای ویژگی text-align در CSS3 پیاده سازی می شوند و تقریباً مانند چپ و راست کار می کنند، اما یک تفاوت وجود دارد. با اعمال مقدار شروع به متنی که از چپ به راست می رود (LTR - از چپ به راست)، تراز چپ می شود (به ترتیب، برای متنی که از راست به چپ می رود (RTL - راست به چپ)، تراز درست خواهد بود). به طور منطقی، مقدار end برعکس عمل می کند (یعنی متن LTR را به سمت راست و متن RTL را به سمت چپ تراز می کند). این دو مقدار توسط برخی از مرورگرها پشتیبانی نمی شوند، از جمله اینترنت اکسپلورربنابراین، اگر نیاز فوری به استفاده از آنها نیست، توصیه می کنیم از مقادیر چپ و راست استفاده کنید.

اسکرین شات ها نمونه هایی از استفاده را نشان می دهد معانی مختلفبرای ویژگی CSS text-align:

عکس صفحه 1: تراز کردن متن LTR با استفاده از مقدار شروع. یک ظاهر مشابه را می توان با مقدار سمت چپ به دست آورد.
اسکرین شات 2: تراز کردن متن LTR با استفاده از مقدار پایانی. ظاهری مشابه را می توان با ارزش مناسب به دست آورد.
اسکرین شات 3: متن را توجیه کنید. با فونت کوچک و عرض صفحه/بلاک بزرگ، این گزینه برای تراز متن در یک صفحه وب قابل قبول به نظر می رسد.
اسکرین شات 4: افزایش اندازه قلم و کاهش عرض بلوک نسبت به مثال قبلی. همانطور که می بینید، شکاف های زشتی در متن ظاهر شده است (با خط قرمز خط کشیده شده است).
اسکرین شات 5: دو روش برای تراز کردن متن با استفاده از نمونه نسخه موبایل آموزش ما (چپ - تراز متن: چپ، راست - تراز متن: توجیه). سعی کنید متن را در هر دو ستون بخوانید و تعیین کنید کدام گزینه برای خواندن راحت تر است.

ولاد مرژویچ

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

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

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

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

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

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

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

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

حالت دارای ویژگی های زیر است.

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

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

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

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

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

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

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

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

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

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

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

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

document.onmousemove = moveTip; تابع moveTip(e) ( floatTipStyle = document.getElementById("floatTip").style; w = 250; // Layer Width // برای IE 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 تگ متصل کنید

لنز "+": 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

نتیجه مثال در شکل نشان داده شده است. 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

علم فونت آز و بوکی

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

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

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

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

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

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

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