نحوه جابجایی عناصر در css عناصر درون خطی کاملاً قرار گرفته به عناصر بلوکی تبدیل می شوند

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

برچسب های بلوک شامل برچسب هایی هستند که مقدار زیادی از اطلاعات متنی را برجسته می کنند: , ,

, , ,

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

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

جریان سند

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

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

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

• نسبت فامیلی؛
• مطلق؛
• درست شد؛
• ایستا

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

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

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



استفاده از ویژگی ها برای موقعیت یابی نسبی

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

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



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

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

تراز کردن عناصر در مرکز

یک عنصر کاملاً درون خطی قرار گرفته دقیقاً مانند یک عنصر درون خطی رفتار خواهد کرد. بنابراین می توان از موقعیت یابی برای کنترل متن در CSS نیز استفاده کرد. می توانید برخی ویژگی های جدید را به آن اعمال کنید، به عنوان مثال، ارتفاع و عرض را تغییر دهید. مرکز و تراز عمودی در CSS از ترکیبی از چندین ویژگی استفاده می کند. تراز عمودی ویژگی بالا را کنترل می کند. اگر می خواهید یک بلوک را در CSS در مرکز قرار دهید، ظرف اصلی باید نسبتاً در موقعیت قرار گیرد و عنصر تراز شده باید کاملاً در موقعیت قرار گیرد. ظرف باید ویژگی بالا را تنظیم کند: 50% و برای جابجایی عنصر به نصف ارتفاع خود، از ویژگی translate با مقدار "0, -50%" استفاده کنید. عناصر کاملاً دارای موقعیت را می توان به یک نوع جدید متمایز کرد، زیرا ویژگی هایی که برای سایر انواع موقعیت یابی در دسترس نیستند به آنها اعمال می شود.



موقعیت یابی نسبت به گوشه سمت چپ بالای مرورگر

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



موقعیت یابی نسبت به گوشه سمت راست بالای مرورگر

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

سیستم مختصات برای موقعیت یابی مطلق

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



نقطه مرجع برای یک عنصر کاملاً در موقعیت

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



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

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

02/18/15 21.4K

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

مزایای طرح بندی با استفاده از برچسب

دو نوع ساختار اصلی وب سایت وجود دارد:

• جدولی;
• مسدود کردن.

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

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

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

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

ساخت بلوک بر اساس تگ ها را لایه به لایه نیز می گویند و خود بلوک ها را لایه می نامند. این به این دلیل است که وقتی از مقادیر خاصی استفاده می‌شود، می‌توان آنها را مانند لایه‌های فتوشاپ روی هم قرار داد.

کمک های موقعیت یابی

در چیدمان بلوک، بهتر است لایه ها را با استفاده از شیوه نامه های آبشاری قرار دهید. ویژگی اصلی CSS که مسئول layout است float است.
نحو ویژگی:
شناور: چپ | راست | هیچکدام | به ارث می برند
جایی که:

• سمت چپ – عنصر را در لبه چپ صفحه تراز کنید. جریان اطراف عناصر باقی مانده در سمت راست رخ می دهد.
• راست - تراز در سمت راست، جریان در اطراف عناصر دیگر - در سمت چپ.
• هیچ - بسته بندی مجاز نیست.
• inherit - مقدار عنصر والد را به ارث می برد.

بیایید به یک مثال سبک وزن از موقعیت یابی div ها با استفاده از این ویژگی نگاه کنیم:

#چپ ( عرض: 200 پیکسل؛ ارتفاع: 100 پیکسل؛ شناور: چپ؛ پس‌زمینه: rgb(255،51،102؛ ) #راست (عرض: 200 پیکسل؛ ارتفاع: 100 پیکسل؛ شناور: راست؛ پس‌زمینه: rgb(0،255،153)؛ ) بلوک چپ بلوک سمت راست




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




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

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

#container ( عرض: 600 پیکسل؛ حاشیه: 0 خودکار؛ ) #چپ (عرض: 200 پیکسل؛ ارتفاع: 100 پیکسل؛ شناور: چپ؛ پس‌زمینه: rgb(255،51،102؛ ) #راست (عرض: 200 پیکسل؛ ارتفاع: 100 پیکسل؛ شناور : چپ؛ پس‌زمینه: rgb(0,255,153); ) #مرکز (عرض: 200 پیکسل؛ ارتفاع: 100 پیکسل؛ شناور: چپ؛ پس‌زمینه: rgb(255,0,0؛ ) بلوک چپ بلوک مرکزی بلوک سمت راست




همین مثال نشان می دهد که چگونه می توانید یک div را به صورت افقی در مرکز قرار دهید. و اگر کد بالا را کمی ویرایش کنید، می توانید به تراز عمودی بلوک ها برسید. برای این کار فقط باید طول لایه ظرف را تغییر دهید (کاهش دهید). یعنی بعد از ویرایش کلاس css آن باید به شکل زیر باشد:

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




در مثال زیر، از تعدادی ویژگی جدید css برای قرار دادن لایه‌ها در داخل یک ظرف استفاده کردیم:

#کانتینر (عرض: 450 پیکسل؛ ارتفاع: 150 پیکسل؛ حاشیه: 0 خودکار؛ رنگ پس‌زمینه: # 66CCFF؛ ) #چپ (عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛ پس‌زمینه: rgb (255،51،102)، نمایشگر: بلوک درون خطی. تراز عمودی: وسط؛ حاشیه-چپ: 35 پیکسل؛ ) #راست (عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛ پس زمینه: rgb (0,255,153)؛ نمایشگر: بلوک درون خطی؛ تراز عمودی: وسط؛ حاشیه-چپ: 35 پیکسل؛ ) #مرکز (عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛ پس‌زمینه: rgb(255،0،0؛ صفحه نمایش: بلوک درون خطی؛ تراز عمودی: وسط؛ حاشیه-چپ: 35 پیکسل؛ )




توضیح کوتاهی از خصوصیات css و مقادیر آنها که در این مثال برای قرار دادن یک div در یک div استفاده کردیم:
• نمایش: بلوک درون خطی - یک عنصر بلوک را در یک خط تراز می کند و اطمینان می دهد که در اطراف عنصر دیگری قرار می گیرد.
• vertical-align: middle – المان را در وسط نسبت به والد تراز می کند.
• margin-left - حاشیه سمت چپ را تنظیم می کند.
چگونه از یک لایه پیوند ایجاد کنیم

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

#layer1 (عرض: 500 پیکسل؛ ارتفاع: 100 پیکسل؛ پس‌زمینه: rgb (51،255،204)، حاشیه: شیار؛ ) a (نمایش: بلوک، تراز متن: مرکز، ارتفاع: 100٪، رنگ: rgb (255،0،51) ؛) به وبسایت ما بپیوندید




در این مثال، با استفاده از نمایش خط: block، پیوند را به مقدار یک عنصر بلوک تنظیم می کنیم. و به طوری که کل ارتفاع بلوک div به یک پیوند تبدیل شود، ارتفاع را 100٪ تنظیم کنید. پنهان کردن و نمایش عناصر بلوک

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

این به ویژه برای صفحه اصلی که هزینه تبلیغات در آن بالاترین است صادق است. بنابراین، این مشکل به وجود می‌آید که بنر تبلیغاتی دیگری را به کجا "پرتاب کنید". و در اینجا شما نمی توانید با تراز کردن div در مرکز صفحه کنار بیایید!

راه حل منطقی تر این است که مقداری بلوک را پنهان کنید. در اینجا یک مثال ساده از چنین پیاده سازی است:

#layer1( display:block; عرض: 500px; height: 100px; background: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="block"; ) other ( layer1="none"; ) document.getElementById("layer1").style.display=layer1; )

این دکمه جادویی است. با کلیک بر روی آن، بلوک مخفی پنهان یا نمایش داده می شود.

از نویسنده: با سلام. تعیین موقعیت عناصر 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 ساخته می شوند. این ویژگی به شما امکان می دهد یک بلوک را به لبه چپ یا راست والد فشار دهید (float: چپ، شناور: راست)، به چندین عنصر بلوک اجازه می دهد در یک خط قرار گیرند، که در هر سایتی رایج است.

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

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

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

ویژگی position دارای مقادیر زیر است
استاتیک نسبی مطلق ثابت
فقط ویژگی‌ها همراه با آن اعمال می‌شوند (به جز موقعیت: استاتیک؛)
بالا پایین سمت چپ
ممکن است در همان زمان حضور داشته باشد
شناور تبدیل حاشیه (به استثنای موقعیت: مطلق؛ و موقعیت: ثابت؛)


.primer ( حاشیه: 4px جامد #456؛ عرض: 200px؛ پس‌زمینه: #fff؛ موقعیت: ثابت؛ موقعیت: استاتیک؛ موقعیت: نسبی؛ موقعیت: مطلق؛ حاشیه: 15px -15px -15px 15px؛ -moz-transform: translate (15px, 15px)؛ -webkit-transform: translate(15px, 15px)؛ -o-transform: translate(15px, 15px)؛ -ms-transform: translate(15px, 15px)؛ z-index: 100; float: چپ؛ بالا: 15 پیکسل؛ پایین: 15 پیکسل؛ سمت راست: 15 پیکسل؛ چپ: 15 پیکسل؛ .primer1 (حاشیه: 4 پیکسل جامد #087e11؛ عرض: 200 پیکسل؛ پس‌زمینه: #e1e1e1؛ شاخص z: 200؛ موقعیت: نسبی؛ )

یک تگ خالی قبل از div با class="primer" اضافه کنید - .

معرفی

عناصر موجود در یک صفحه وب فضای مشخصی را اشغال می کنند. با قیاس با کشتی های موجود در بازی "نبرد". بین کشتی ها باید سلول های خالی وجود داشته باشد - حاشیه.

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

به ترتیب طبیعی، تگ های پایین در کد بالای تگ های بالایی نشان داده می شوند. به لطف z-index در سطح 2، می توانید عنصر قابل مشاهده را خودتان تعریف کنید.


استاتیک موقعیت - موقعیت: استاتیک;

موقعیت: استاتیک پیش فرض است و نسبی، مطلق و ثابت را لغو می کند. مقادیر ویژگی های بالا، پایین، راست، چپ نادیده گرفته می شوند. اگر تبدیل وجود نداشته باشد، z-index در نظر گرفته نمی شود.

z-index: 3; ) .svetlyi2 ( رنگ پس زمینه: #fff؛ عرض: 250 پیکسل؛ z-index: 2؛ حاشیه: 0px -30px -30px 30px؛ ) .svetlyi3 (رنگ پس زمینه: #f5f5dc؛ عرض: 250px؛ z-index: ؛) A B C

موقعیت نسبی - موقعیت: نسبی;

بلوکی که موقعیت: relative را به آن اختصاص می دهیم در اولویت قرار می گیرد. محتوای عنصر پایین پنهان است.

حاشیه: 0px -60px -30px 60px; موقعیت: نسبی; A B C


برای قرار دادن بلوک B در بالای B، اما در زیر A، اختصاص موقعیت: نسبت به آن کافی نیست، زیرا در کد زیر بلوک A است، به این معنی که با آن همپوشانی خواهد داشت.

temnyi ( رنگ پس‌زمینه: #666؛ عرض: 500 پیکسل؛ تراز نوشتاری: مرکز؛ اندازه قلم: 250%؛) .svetlyi1 (رنگ پس‌زمینه: #ccc؛ عرض: 250 پیکسل؛ حاشیه: 0px -60px -30px 60px ؛ موقعیت: نسبی؛ ) .svetlyi2 (رنگ پس زمینه: #fff؛ عرض: 250 پیکسل؛ حاشیه: 0 پیکسل -30 پیکسل - 30 پیکسل؛ موقعیت: نسبی؛ ) .svetlyi3 (رنگ پس زمینه: #f5f5dc؛ عرض: 250 پیکسل؛ ) قبل از میلاد مسیح


همچنین باید z-index را برای عنصر B کمتر از بلوک A تنظیم کنید.

temnyi ( رنگ پس‌زمینه: #666؛ عرض: 500 پیکسل؛ تراز نوشتاری: مرکز؛ اندازه قلم: 250%؛) .svetlyi1 (رنگ پس‌زمینه: #ccc؛ عرض: 250 پیکسل؛ حاشیه: 0px -60px -30px 60px ; ) .svetlyi2 ( رنگ پس زمینه: #fff؛ عرض: 250 پیکسل؛ حاشیه: 0 پیکسل -30 پیکسل - 30 پیکسل؛ ) .svetlyi3 ( رنگ پس زمینه: #f5f5dc؛ عرض: 250 پیکسل؛ ) A B C


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


temnyi ( پس‌زمینه رنگ: #666؛ عرض: 500 پیکسل؛ تراز نوشتاری: مرکز؛ اندازه قلم: 250%؛) .svetlyi1 (رنگ پس‌زمینه: #ccc؛ عرض: 250 پیکسل؛ بالا: 30 پیکسل؛ سمت چپ: 60 پیکسل؛ موقعیت: نسبی؛ z-index: 2;) .svetlyi2 (رنگ پس زمینه: #fff؛ عرض: 250px؛ حاشیه: 0px -30px -30px 30px؛ موقعیت: نسبی؛ z-index: 1;) .svetlyi3 (پس‌زمینه- رنگ: #f5f5dc؛ عرض: 250 پیکسل؛ ) A B C


قیاس کامل با ملک

.temnyi (رنگ پس‌زمینه: #666؛ عرض: 500 پیکسل؛ تراز متن: مرکز؛ اندازه قلم: 250%؛) .svetlyi1 (رنگ پس‌زمینه: #ccc؛ عرض: 250 پیکسل؛ تبدیل: ترجمه (60 پیکسل، 30 پیکسل) ؛ z-index: 2; ) .svetlyi2 ( پس زمینه رنگ: #fff؛ عرض: 250 پیکسل؛ حاشیه: 0 پیکسل -30 پیکسل -30 پیکسل 30 پیکسل؛ موقعیت: نسبی؛ شاخص z: 1؛ ) .svetlyi3 ( رنگ پس زمینه: # f5f5dc؛ عرض: 250 پیکسل؛ ) A B C

برای عناصر درون خطی

عناصر حاشیه داخلی به پایین یا بالا منتقل نمی شوند (). فقط بالا، پایین


بالا: 30 پیکسل؛ موقعیت: نسبی; BAB یا
.temnyi ( پس‌زمینه رنگ: #666؛ عرض: 500 پیکسل؛ اندازه قلم: 250٪؛) .svetlyi1 (رنگ پس‌زمینه: #ccc؛ عرض: 250 پیکسل؛ تبدیل: translate(0px, 30px؛ ) .svetlyi2 (پس‌زمینه -color: #fff؛ عرض: 250px؛ ) BAB

B A B

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

به نظر می رسد بلوکی با موقعیت: مطلق باید بالای موقعیت: نسبی قرار گیرد، اما اینطور نیست، نظم طبیعی در اینجا اعمال می شود. این به این معنی است که z-index به شما امکان می دهد یک عنصر اولویت را بین آنها انتخاب کنید.


temnyi ( رنگ پس‌زمینه: #666؛ عرض: 500 پیکسل؛ تراز نوشتاری: مرکز؛ اندازه قلم: 250%؛) .svetlyi1 (رنگ پس‌زمینه: #ccc؛ عرض: 250 پیکسل؛ حاشیه: 0px -60px -30px 60px ؛ موقعیت: نسبی؛ ) .svetlyi2 (رنگ پس زمینه: #fff؛ عرض: 250 پیکسل؛ حاشیه: 0 پیکسل -30 پیکسل - 30 پیکسل؛ موقعیت: مطلق؛ ) .svetlyi3 (رنگ پس زمینه: #f5f5dc؛ عرض: 250 پیکسل؛ ) قبل از میلاد مسیح

بلوک B موقعیت اصلی بلوک B را نادیده می گیرد، زیرا با موقعیت: مطلق و موقعیت: ثابت، عنصر تاثیر بر برچسب های همسایه را از طریق عرض/ارتفاع یا از طریق شناور: چپ متوقف می کند.


temnyi ( رنگ پس‌زمینه: #666؛ عرض: 500 پیکسل؛ تراز نوشتاری: مرکز؛ اندازه قلم: 250%؛) .svetlyi1 (رنگ پس‌زمینه: #ccc؛ عرض: 250 پیکسل؛ حاشیه: 0px -60px -30px 60px ؛ موقعیت: نسبی؛ شاخص z: 2؛ .svetlyi2 (رنگ پس‌زمینه: #fff؛ عرض: 250 پیکسل؛ حاشیه: 0 پیکسل -30 پیکسل -30 پیکسل 30 پیکسل؛ موقعیت: مطلق؛ شاخص z: 1؛ ) .svetlyi3 ( پس‌زمینه -color: #f5f5dc؛ عرض: 250px؛ حاشیه بالا: 20px؛ ) A B C

جدول پایانی

خواص متمایز	موقعیت: استاتیک	موقعیت: نسبی; transform: translate();	موقعیت: مطلق;	موقعیت: ثابت؛
پوشش	بهتر است عناصر را روی هم قرار ندهید	عناصر دارای اولویت دید نسبت به استاتیک هستند. معانی دیگر معادل هستند. کسی که در کد پایین تر است یا مقدار z-index بالاتری دارد قابل مشاهده خواهد بود.
نقطه مرجع بالا، راست، پایین و چپ	نادیده گرفته شده است	موقعیت اولیه عنصر	لبه عنصر والد	لبه پنجره مرورگر
عناصر اطراف	موقعیت فعلی عنصر را در نظر بگیرید	موقعیت اولیه عنصر را در نظر بگیرید	نادیده گرفتن موقعیت عنصر
عرض: 100%؛ این عرض است	عنصر (برای درون خطی) / عنصر والد (برای سطح بلوک)		عنصر والد با موقعیتی که روی استاتیک تنظیم نشده است	پنجره مرورگر
هنگام پیمایش عنصر صفحه	حرکت می کند			به یک مکان مشخص در پنجره مرورگر می چسبد

اکنون، برای ادغام مطالب، روی دکمه های ابتدای مقاله کلیک کنید، به این فکر کنید که چرا چنین تغییراتی رخ داده است.

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

در این مقاله، نگاهی دقیق تر به برخی از چیزهای کمتر شناخته شده در مورد موقعیت یابی CSS خواهیم داشت.

قبل از شروع، اجازه دهید به طور خلاصه اصول انواع مختلف موقعیت یابی را مرور کنیم.

مروری بر روش های موقعیت یابی موجود

ویژگی موقعیت CSS نوع موقعیت یک عنصر را تعیین می کند.

گزینه های موقعیت یابی

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

برای این کار باید ویژگی position را روی یکی از مقادیر زیر تنظیم کنید:

• نسبت فامیلی
• مطلق
• درست شد
• چسبنده

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

• درست
• پایین
• مقدار اولیه این ویژگی ها کلمه کلیدی خودکار است.

باید در نظر گرفت که اگر یک عنصر دارای ویژگی موقعیت آن مطلق یا ثابت باشد، آنگاه یک عنصر کاملاً موقعیت‌یافته است. همچنین، ویژگی z-index برای عناصر موقعیت‌یافته شروع به کار می‌کند که ترتیب انباشتگی را تعیین می‌کند.

تفاوت بین روش های موقعیت یابی اصلی

اکنون بیایید به سرعت به سه تفاوت اساسی بین انواع موقعیت یابی موجود نگاه کنیم:

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

شما می توانید این را با جزئیات بیشتر در دمو مشاهده کنید:

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

عناصر تعیین موقعیت با نوع موقعیت یابی مطلق

من مطمئن هستم که اکثر مردم می دانند موقعیت یابی مطلق چگونه کار می کند. با این حال، بسیاری از چیزها در مورد آن ممکن است مبتدیان را گیج کند.

بنابراین، تصمیم گرفتم هنگام توصیف ویژگی های کمتر شناخته شده موقعیت یابی با آن شروع کنم.

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

این با مثال زیر نشان داده می شود:

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

با این حال، ما پوشش بیرونی (یک عنصر با کلاس jumbotron) را نسبتاً در موقعیت قرار داده ایم. توجه کنید که چگونه موقعیت بلوک سبز با تغییر نوع موقعیت یابی اجداد آن تغییر می کند.

عناصر کاملاً قرار گرفته ویژگی float را نادیده می گیرند

اگر موقعیت‌یابی مطلق یا ثابت را برای یک عنصر شناور اعمال کنیم، ویژگی float روی none تنظیم می‌شود. از طرف دیگر، اگر موقعیت نسبی را تنظیم کنیم، عنصر شناور باقی می ماند.

به نسخه ی نمایشی مربوطه نگاهی بیندازید:

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

عناصر درون خطی کاملاً قرار گرفته به عناصر بلوکی تبدیل می شوند

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

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

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

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

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

به‌طور پیش‌فرض، وقتی دو حاشیه عمودی با هم برخورد می‌کنند، در یکی برابر با حداکثر آن‌ها ترکیب می‌شوند. به این حالت فروپاشی حاشیه می گویند.

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

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

اما چگونه می توانیم از فروپاشی حاشیه ها جلوگیری کنیم؟ ما باید نوعی جداکننده بین آنها قرار دهیم.

این می تواند بالشتک یا حاشیه باشد و می تواند برای عناصر والد و فرزند اعمال شود. گزینه دیگر اضافه کردن یک clearfix به عنصر والد است.

تعیین موقعیت عناصر با پیکسل و درصد

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

کمی گیج کننده است، اینطور نیست؟ بنابراین ابتدا بیایید ببینیم مشخصات در مورد درصد افست چه می گوید:

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

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

دمو این تفاوت را نشان می دهد:

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

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

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

نتیجه

امیدوارم این مقاله به شما در درک بهتر موقعیت در CSS کمک کرده باشد و برخی از چالش ها را روشن کرده باشد.