موقعیت یابی CSS بیش از X X، Y مختصات است
موقعیت جغرافیایی CSS برای مدت طولانی بخش مهمی از ایجاد طرح بندی وب سایت است. حتی با ظهور تکنیک های جدید CSS مانند Flexbox و CSS Grid، موقعیتی که هنوز در مکان های مختلف طراحی شده است، جایگاه مهمی دارد.
هنگام استفاده از موقعیت CSS، اولین چیزی که باید انجام دهید این است که ویژگی CSS را برای موقعیت به مرورگر بگویید اگر قصد استفاده از موقعیت مطلق یا نسبی برای یک عنصر داده شده را داشته باشید. شما همچنین باید به وضوح تفاوت بین این دو ویژگی موقعیت را درک کنید.
در حالی که مطلق و نسبی دو ویژگی CSS موقعیت هستند که اغلب در طراحی وب استفاده می شوند، در واقع چهار حالت برای ویژگی موقعیت وجود دارد:
- استاتیک
- مطلق
- نسبت فامیلی
- درست شد
استاتیک موقعیت پیش فرض برای هر عنصر در یک صفحه وب است. اگر موقعیت یک عنصر را تعریف نکنید، آن ایستا خواهد بود. این به این معنی است که بر روی صفحه نمایش بر اساس جایی که در سند HTML قرار دارد و نحوه نمایش آن در داخل جریان طبیعی آن سند نمایش داده می شود.
اگر شما قوانین موقعیتی مانند بالا یا چپ را به عنصری که دارای موقعیت استاتیک است اعمال کنید، این قوانین نادیده گرفته می شود و عنصر در جایی که در جریان سند معمولی ظاهر می شود، باقی خواهد ماند. در واقع، شما به ندرت، اگر هرگز، نیاز به قرار دادن یک عنصر به موقعیت استاتیک در CSS از آنجا که این مقدار پیش فرض است.
موقعیت مطلق CSS
موقعیت مطلق احتمالا ساده ترین موقعیت CSS برای درک است. شما با این ویژگی موقعیت CSS شروع میکنید:
موقعیت: مطلق؛این مقدار به مرورگر می گوید که هر چیزی که قرار است قرار گیرد باید از جریان طبیعی سند حذف شود و به جای آن در مکان دقیق صفحه قرار گیرد. این بر اساس نزدیک ترین اجداد غیرمستقیم آن عنصر محاسبه می شود.
از آنجا که یک عنصر کاملا موقعیتی از جریان طبیعی سند خارج می شود، بر عناصر قبل از آن یا بعد از آن در HTML در صفحه وب قرار نمی گیرد.
به عنوان مثال - اگر شما تقسیم بندی شده بود که با استفاده از ارزش نسبی (ما به زودی به این مقدار نگاه خواهیم کرد)، و در داخل آن بخش شما یک پاراگراف داشتید که می خواستید 50 پیکسل را از بالای بخش قرار دهید یک مقدار موقعیت "مطلق" را به آن پاراگراف اضافه می کند و با مقدار عددی 50px در مورد "top"، مانند این، اضافه می شود.
موقعیت: مطلق؛ بالا: 50 پیکسل؛این عنصر کاملا موقعیتی همیشه 50 پیکسل از بالای این تقسیم نسبتا موقعیتی را نمایش می دهد - مهم نیست که چه چیزی در جریان عادی وجود دارد. عنصر موقعیت "کاملا" شما از موقعیت نسبتا موقعیتی به عنوان زمینه آن استفاده کرد و ارزش خبری که شما استفاده می کنید نسبی است.
چهار ویژگی موقعیتی که شما برای استفاده استفاده می کنید عبارتند از:
- بالا
- درست
- پایین
- ترک کرد
شما می توانید از بالا یا پایین (از آنجا که یک عنصر را نمی توان بر اساس هر دو این مقادیر قرار داد) و یا راست یا چپ استفاده کنید.
اگر یک عنصر به موقعیت مطلق تنظیم شده باشد، اما در آن هیچ اجدادی غیر موقعیتی وجود ندارد، سپس آن را نسبت به عنصر بدن که بالاترین عنصر صفحه است، قرار می دهد.
موقعیت نسبی
ما قبلا موقعیت نسبی را ذکر کردیم، بنابراین اجازه دهید به آن ملک نگاه کنیم.
موقعیت نسبی از خواص چهارگانه موقعیتی همانند موقعیت مطلق استفاده می کند، اما به جای اینکه موقعیت عنصر را در نزدیکترین اجداد خود قرار گیرد، از نقطه ای که عنصر در جریان جریان عادی است، شروع می شود.
به عنوان مثال، اگر شما سه پاراگراف در صفحه وب خود دارید و سومین شیوه «موقعیت: نسبی» قرار دارد، موقعیت آن بر اساس موقعیت فعلی آن جبران می شود.
قسمت 1
بند 2
بخش 3.
در مثال بالا، پاراگراف سوم 2 از سمت چپ عنصر کانتینر قرار خواهد گرفت، اما همچنان زیر دو پاراگراف اول قرار دارد. این در جریان عادی سند باقی خواهد ماند و فقط کمی جبران می شود. اگر شما آن را به موقعیت تغییر دهید: مطلق؛ چیزی که زیر آن قرار دارد در بالای آن نمایش داده می شود، زیرا دیگر در جریان معمول سند نخواهد بود.
عناصر در یک صفحه وب اغلب برای تعیین مقدار موقعیت استفاده می شوند: نسبی بدون مقدار عددی ایجاد شده است، به این معنی که عنصر با دقیقا همان جایی که در جریان عادی ظاهر می شود، باقی می ماند. این کار صرفا برای ایجاد این عنصر به عنوان زمینه ای است که عناصر دیگر می توانند به طور کامل قرار بگیرند. به عنوان مثال، اگر تقسیم اطراف کل وب سایت خود را با ارزش کلاس "ظرف" (که یک سناریوی بسیار رایج در طراحی وب) است، این تقسیم را می توان به موقعیت نسبی تنظیم کرد تا هر چیزی در داخل آن می تواند استفاده شود آن را به عنوان زمینه موقعیتی
درباره موقعیت ثابت چه؟
موقعیت ثابت بسیار شبیه موقعیت مطلق است. موقعیت عنصر همانند مدل مطلق محاسبه می شود، اما عناصر ثابت در آن محل ثابت می شوند - تقریبا مانند یک علامت با ابعاد . همه چیز دیگری در صفحه بعد از آن عنصر را مرور می کند.
برای استفاده از این مقدار اموال، شما می توانید تنظیم کنید:
موقعیت: ثابت؛به یاد داشته باشید هنگامی که یک عنصر را در محل خود در محل خود رفع می کنید، هنگامی که صفحه وب شما چاپ می شود، در آن محل چاپ می شود. به عنوان مثال، اگر عنصر شما در بالای صفحه شما ثابت شود، در بالای هر صفحه چاپ شده ظاهر می شود - زیرا در بالای صفحه ثابت شده است. شما می توانید از انواع رسانه ها برای تغییر نحوه صفحات چاپ شده عناصر ثابت استفاده کنید:
media screen {h1 # first {position: fixed؛ }}media print {h1 # first {موقعیت: static؛ }}مقاله اصلی جنیفر کریینین. ویرایش شده توسط Jeremy Girard در 7/7/16.