از نویسنده:با درود. تعیین موقعیت عناصر css موضوع بسیار مهمی در ساخت سایت است. در این مقاله، من پیشنهاد می کنم آن را با جزئیات بیشتر در نظر بگیریم، تمام راه های جابجایی بلوک ها در سراسر صفحه وب.
انواع آن چیست
اگر در مورد مکان یابی عناصر بلوک صحبت کنیم، با استفاده از ویژگی position تنظیم می شود. چهار معنا دارد و هر کدام مستحق بررسی جداگانه است.
موقعیت یابی مطلق
این اولین گونه شناخته شده است. به این صورت تنظیم می شود: موقعیت: مطلق. پس از آن، بلوک خواص معمول خود را از دست می دهد و به طور کامل از جریان عادی خارج می شود. این جریان چیست؟ سعی کنید چندین عنصر بلوک را در یک ردیف در نشانه گذاری قرار دهید. چگونه خواهند شد؟ یکی پس از دیگری، و نه غیر از این.
این رفتار پیش فرض عادی بلوک ها است. اما برای بلوکی که موقعیت‌یابی مطلق تعریف شده است، چه اتفاقی می‌افتد؟ به طور کامل از جریان عادی خارج می شود، بلوک های دیگر به سادگی متوجه آن نمی شوند، گویی هرگز وجود نداشته است، اما عنصر در صفحه باقی می ماند. موقعیت یابی مطلق در css اغلب برای قرار دادن دقیق عناصر تزئینی، نمادها و سایر موارد طراحی استفاده می شود.
اکنون می توان آن را با استفاده از ویژگی های چپ، راست، بالا و پایین منتقل کرد. به‌طور پیش‌فرض، حرکت نسبت به لبه‌های پنجره مرورگر رخ می‌دهد، اما اگر عنصر والد دارای موقعیت: نسبی باشد، آفست نسبت به بلوک والد رخ می‌دهد.
بلوک (موقعیت: مطلق؛ پایین: 0؛ سمت راست: 0؛)
مسدود کردن ( موقعیت: مطلق; پایین: 0; سمت راست: 0; |
عنصر به گوشه سمت راست پایین منتقل می شود. متوجه شدم که دکمه بالایی اغلب به این صورت انجام می شود - آنها فقط آن را کاملاً در گوشه قرار می دهند. در اینجا مثال دیگری وجود دارد که در آن ابتدا نشانه گذاری احتمالی را به شما نشان می دهم:
< div id = "wrapper" > < div class = "block" > < / div > < / div > |
و اکنون سبک های css برای این قطعه:
#wrapper (وضعیت: نسبی؛) بلوک (موقعیت: مطلق؛ بالا: 0؛ سمت راست: 10 پیکسل؛)
#لفافه ( موقعیت: نسبی; مسدود کردن ( موقعیت: مطلق; بالا: 0; سمت راست: 10 پیکسل؛ |
در این مثال، ما ابتدا موقعیت نسبی را به ظرف والد (نسبی - در مورد آن در مقاله بعدی) یادداشت کردیم، و سپس موقعیت مطلق را برای همان عنصر .block تنظیم کردیم. در نتیجه، مختصات نه از خود پنجره مرورگر، بلکه از لبه های عنصر والد، یعنی بلوک wrapper، شمارش می شود.
موقعیت یابی نسبی عناصر css
این نمای زیر است و به این صورت نوشته می شود - موقعیت: نسبی. مختصات با همان ویژگی های موقعیت مطلق تنظیم می شوند. تنها تفاوت مهم این است که عنصر به طور رسمی از جریان نمی افتد - جایی برای آن وجود دارد.
این مقدار مانند visibility عمل می کند: پنهان، زمانی که عنصر از صفحه پنهان می شود، اما فضای زیر آن دست نخورده باقی می ماند. در مورد قرارگیری نسبی نیز همین اتفاق می افتد - بلوک را می توان به هر جایی منتقل کرد، اما فضای آن خالی می ماند و قسمت های دیگر آن را نمی گیرند.
همچنین مهم است که بدانید که افست از لبه‌های پنجره مرورگر وب رخ نمی‌دهد، بلکه از جایی که بلوک در ابتدا قرار داشت، رخ می‌دهد. به این معنا که:
بلوک (موقعیت: نسبی؛ بالا: 10 پیکسل؛ سمت راست: 50 پیکسل؛)
مسدود کردن ( موقعیت: نسبی; بالا: 10px; سمت راست: 50 پیکسل؛ |
بلوک 50 پیکسل به سمت راست و 10 پیکسل به سمت چپ حرکت می کند.
تثبیت
مطمئناً در اینترنت، بیش از یک بار در سایت ها دیده اید که هنگام پیمایش، برخی از بنرها ناپدید نشدند، اما همچنان در منطقه دید شما قرار داشتند، گویی به یک مکان چسبیده بودند. این عمدتا با استفاده از موقعیت ثابت انجام می شود. برای این کار باید بنویسید:
موقعیت: موقعیت ایستا ایستا یا عادی
آخرین نوع ثابت است، این رفتار معمول عناصر بلوک است. نیازی به نوشتن نیست، زیرا به طور پیش فرض است، اما هنوز باید مقدار چهارم را بدانید. گاهی اوقات برای لغو یک نوع موقعیت یابی در رویدادهای خاص در صفحه وب، با position: static نوشته می شود.
چگونه می توانم بلوک ها را به درستی در css قرار دهم؟
ما معانی را در نظر گرفتیم، اما این کافی نیست تا این موضوع را برای خود ببندیم. در واقع، شما باید بدانید که کجا و چه نوع موقعیت یابی باید اعمال شود. من قبلاً برای شما مثالی با یک مثال ثابت آورده‌ام - می‌توانید از آن برای ایجاد ستون‌های کناری، هدر یا پاورقی چسبنده استفاده کنید.
موقعیت یابی نسبی می تواند به زمانی کمک کند که بخواهید یک بلوک را کمی نسبت به موقعیت آن جابه جا کنید و همچنان آن را در جریان نگه دارید. همچنین برای استفاده از حرکت مطلق برای کودکان روی بلوک‌های والدین تنظیم شده است.
ترفندهای دیگر: مرکز، بلوک های شناور
ویژگی position تمام مشکلات مربوط به چیدمان عناصر بلوک را حل نمی کند. برای مثال، چگونه می‌توانید با استفاده از آن یک شبکه سایت ایجاد کنید؟ من ایده خوبی ندارم در اینجا سایر خواص به کمک می آیند.
گریدها اغلب با استفاده از شناورها در css ساخته می شوند. این ویژگی به شما امکان می دهد بلوک را به لبه چپ یا راست والد فشار دهید (float: چپ، شناور: راست)، به چندین عنصر بلوک اجازه می دهد تا در یک خط قرار گیرند، که در هر سایتی رایج است.
مرکز کردن به این صورت انجام می شود: بلوک باید یک عرض مشخص بنویسد و سپس حاشیه ویژگی: 0 را روی auto تنظیم کند. این مقدار خودکار است که آن را به صورت افقی دقیقاً با مرکز تراز می کند. به طور طبیعی، برای این باید تنها در خط خود باشد، در غیر این صورت هیچ چیز کار نخواهد کرد.
همه انواع موقعیت یابی که در این مقاله ذکر شده است می تواند برای یک توسعه دهنده وب مفید باشد. در جایی نماد باید درج شود (موقعیت: مطلق)، در جایی، موقعیت بلوک باید کمی تنظیم شود و جایی در پشت آن باقی بماند (موقعیت: نسبی)، و جایی که ویجت باید ثابت شود (موقعیت: ثابت). به طور کلی، شناخت این ویژگی قطعاً اضافی نخواهد بود.
خوب، برای یادگیری بیشتر از دنیای سایت سازی، حتما در وبلاگ ما مشترک شوید و مطالب آموزشی جدید دریافت کنید. و همچنین به شما توصیه می کنم که نگاهی به موضوع ما بیندازید که در آن موضوع مشابهی نیز مطرح شده است. (موقعیت اقلام)
ولاد مرژویچ
موقعیت یابی به موقعیت یک عنصر در یک سیستم مختصات اشاره دارد. چهار نوع موقعیت وجود دارد: عادی، مطلق، ثابت و نسبی. بسته به نوع که از طریق ویژگی position تنظیم می شود، سیستم مختصات نیز تغییر می کند.
به لطف ترکیبی از ویژگی‌های موقعیت، چپ، بالا، راست و پایین، یک عنصر را می‌توان بر روی یکدیگر قرار داد، در نقطه‌ای با مختصات خاصی نمایش داده شد، در یک مکان مشخص ثابت شد، موقعیت یک عنصر را نسبت به دیگری تعیین کرد. مانند سایر ویژگی های CSS، کنترل موقعیت از طریق اسکریپت ها در دسترس است. بنابراین، شما می توانید به صورت پویا موقعیت عناصر را بدون بارگیری مجدد صفحه، ایجاد انیمیشن ها و جلوه های مختلف تغییر دهید.
موقعیت یابی عادی
اگر ویژگی position برای یک عنصر تنظیم نشده باشد یا ثابت باشد، عنصر طبق معمول در جریان سند ارائه می شود. به عبارت دیگر، عناصر به ترتیبی که در منبع HTML ظاهر می شوند در صفحه نمایش داده می شوند.
ویژگی های چپ، بالا، راست، پایین، در صورت مشخص شدن، نادیده گرفته می شوند.
موقعیت یابی مطلق
با موقعیت یابی مطلق، عنصر در جریان سند وجود ندارد و موقعیت آن نسبت به لبه های مرورگر است. می توانید این نوع را از طریق مقدار مطلق ویژگی position تنظیم کنید. مختصات نسبت به لبه های پنجره مرورگر مشخص می شوند که "منطقه قابل مشاهده" نامیده می شود (شکل 3.42).
برنج. 3.42. مقادیر ویژگی های چپ، راست، بالا و پایین وقتی در حالت مطلق قرار می گیرند
حالت دارای ویژگی های زیر است.
- عرض لایه، اگر به طور صریح تنظیم نشده باشد، عرض محتوا به اضافه مقادیر حاشیه، حاشیه و padding است.
- یک لایه اگر ویژگی های راست، چپ، بالا و پایین را نداشته باشد، موقعیت اصلی خود را تغییر نمی دهد.
- ویژگی های چپ و بالا بر ویژگی های راست و پایین اولویت دارند. اگر چپ و راست با هم تضاد داشته باشند، ارزش راست نادیده گرفته می شود. در مورد پایین هم همینطور.
- اگر سمت چپ روی مقدار منفی تنظیم شود، لایه فراتر از لبه سمت چپ مرورگر می رود و نوار اسکرول ظاهر نمی شود. این یکی از راه‌های پنهان کردن یک عنصر از دید است. همین امر در مورد ویژگی top صدق می کند، فقط لایه از لبه بالایی عبور می کند.
- اگر سمت چپ روی مقداری بیشتر از عرض ناحیه قابل مشاهده تنظیم شده باشد، یا اگر سمت راست با مقدار منفی مشخص شده باشد، یک نوار اسکرول افقی ظاهر می شود. یک قانون مشابه با بالا کار می کند، فقط نوار اسکرول عمودی مربوط می شود.
- به طور همزمان، ویژگی های سمت چپ و راست مشخص شده، عرض لایه را تشکیل می دهند، اما فقط در صورتی که عرض مشخص نشده باشد. ویژگی width را اضافه کنید و مقدار مناسب نادیده گرفته می شود. همین امر در مورد ارتفاع لایه اتفاق می افتد، فقط ویژگی های بالا، پایین و ارتفاع از قبل درگیر هستند.
- یک عنصر کاملاً موقعیت‌یافته با سند در حین حرکت حرکت می‌کند.
از ویژگی position تنظیم شده روی absolute می توان برای ایجاد افکت فریم استفاده کرد. علاوه بر موقعیت یابی مطلق، عناصر باید دارای ویژگی سرریز با مقدار خودکار باشند. سپس، زمانی که محتوا از ارتفاع ناحیه قابل مشاهده بیشتر شود، یک نوار اسکرول ظاهر می شود. ارتفاع و عرض "قاب ها" به طور خودکار با استفاده از ویژگی های چپ، راست برای عرض و بالا، پایین برای ارتفاع به طور همزمان ایجاد می شود (مثال 3.31).
مثال 3.31. ایجاد یک آنالوگ از فریم ها
پلو مردم جهان
فرغانه پلو
گوشت تکه تکه شده را در یک قابلمه بریزید و تفت دهید تا پوسته شکل بگیرد. پیاز حلقه ای خرد شده را به همراه گوشت تفت دهید تا قرمز شود سپس هویج را که به صورت نواری خرد شده اضافه کنید. نیمی از نمک را اضافه کنید، همه چیز را هم بزنید و تفت دهید تا هویج ها قهوه ای طلایی شوند. بعد از آن نصف مقدار لازم آب را بریزید و بگذارید بجوشد.
روی برنج را با یک لایه یکنواخت بپوشانید و حرارت را زیاد کنید و بلافاصله آب بریزید به طوری که 1-1.5 سانتی متر روی برنج را بپوشاند و به محض تبخیر آب پلو را با سطحی جمع کنید و به ته آن بروید. سپس روی پلو را بپوشانید و بگذارید 20-25 دقیقه بماند.
پلو تمام شده را کاملا هم بزنید، به ظرف بزرگ منتقل کنید، گوشت را روی آن پهن کنید.
نتیجه این مثال در شکل نشان داده شده است. 3.43. لایه هدر طبق معمول در جریان رندر می شود و نوار کناری و لایه های محتوا روی موقعیت مطلق تنظیم می شوند.
برنج. 3.43. استفاده از موقعیت یابی مطلق
در IE6، عناصر کاملاً دارای موقعیت را نمی توان همزمان روی ویژگی های چپ، راست و بالا، پایین تنظیم کرد.
موقعیت یابی مطلق نیز برای ایجاد افکت های مختلف مانند راهنمای ابزار برای عکس ها استفاده می شود. برخلاف ویژگی عنوان تگ که متن راهنمای ابزار را نیز نمایش می دهد، از طریق استایل ها می توانید ظاهر متن نمایش داده شده را با استفاده از اسکریپت کنترل کنید.
ابتدا یک لایه خالی با شناسه floatTip ایجاد می کنیم و استایل آن را تعریف می کنیم. سه ویژگی سبک باید مورد نیاز باشد - موقعیت با مقدار مطلق، نمایش با مقدار هیچ یک لایه را پنهان نمی کند و عرض، عرض لایه اشاره را تنظیم می کند. بقیه ویژگی ها به درخواست توسعه دهنده استفاده می شوند و برای تغییر ظاهر لایه در نظر گرفته شده اند (مثال 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"). سبک؛ 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 تگ متصل شود.
لنز "+": Canon EF 24-105 f / 4L IS USM
فلاش "+": Canon Speedlite 580 EX
نوردهی "+": 1/125
دیافراگم: 5.6 ")" onmouseout = "toolTip ()" />