CSS موقعیت

ویژگی Positioning (موقعیت) CSS به شما امکان می‌دهد که عناصر را قرار دهید.

CSS موقعیت و شناور

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

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

در اینجا، CSS1 برای اولین بار مفهوم شناور را معرفی کرد که بر اساس یک ویژگی اضافی که Netscape در اوایل توسعه وب ارائه داد، پایه‌گذاری شد. شناور کاملاً یک موقعیت نیست، اما قطعاً یک چیدمان عادی نیز نیست. ما در فصل‌های بعدی به تعریف دقیق‌تر شناور خواهیم پرداخت.

همه چیز یک جعبه هستند

عناصر div، h1 یا p اغلب به عنوان عناصر بلوکی شناخته می‌شوند. این به این معناست که این عناصر به عنوانیک محتوای بلوکیبه عنوان

می‌توانید از ویژگی displayتغییر نوع جعبه‌های تولید شده. این به این معناست که با تنظیم ویژگی display به block، می‌توان عناصر خطی (مانند عنصر <a>) را مانند عناصر بلوکی به نظر رسانید. همچنین می‌توان display را به none تنظیم کرد تا عنصر ایجاد شده هیچ جعبه‌ای نداشته باشد. در این صورت، جعبه و تمام محتوای آن نمایش داده نمی‌شود و در فضای مستند قرار نمی‌گیرد.

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

<div>
متن
<p>متن بیشتری.</p>
</div>

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

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

مکانیزم‌های قرارگیری CSS

CSS دارای سه مکانیزم قرارگیری پایه‌ای است: جریان عادی، شناور و قرارگیری مطلق.

مگر اینکه به صورت خاص تعیین شود، تمام جعبه‌ها در قرارگیری عادی قرار می‌گیرند. به عبارت دیگر، موقعیت عناصر در جریان عادی توسط موقعیت عناصر در (X)HTML تعیین می‌شود.

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

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

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

ویژگی position CSS

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

معنای مقادیر ویژگی position:

static
قابلیت تولید جعبه‌های عادی. عناصر بلوکی یک جعبه مستطیلی تولید می‌کنند که بخشی از جریان مستند است، و عناصر خطی یک یا چند جعبه خطی ایجاد می‌کنند که در داخل عنصر والد خود قرار می‌گیرند.
relative
جعبه عنصر به فاصله‌ای خاص جابجا می‌شود. عنصر همچنان شکل خود را قبل از محلی‌سازی حفظ می‌کند و فضای قبلی اشغال شده توسط آن همچنان حفظ می‌شود.
absolute
جعبه عنصر به طور کامل از جریان مستند حذف شده و به نسبت بلوک شامل آن محلی‌سازی می‌شود. بلوک شامل ممکن است عنصر دیگری در مستند باشد یا بلوک شامل اولیه. فضای قبلی که عنصر در جریان معمولی اشغال می‌کرد، بسته می‌شود،就好像 که عنصر هیچگاه وجود نداشته است. پس از محلی‌سازی عنصر، یک جعبه بلوکی ایجاد می‌شود، بدون توجه به نوع جعبه‌ای که در جریان معمولی ایجاد می‌شود.
fixed
نمایش جعبه عنصر مشابه position: absolute است، اما بلوک شامل آن خود پنجره است.

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

مثال

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

ویژگی‌های قرارگیری CSS

ویژگی‌های قرارگیری CSS به شما امکان می‌دهند که عناصر را قرار دهید.

ویژگی توضیح
position عناصر را به یک موقعیت ثابت، نسبی، مطلق یا ثابت قرار می‌دهد.
top تعریف می‌کند که چگونه حاشیه خارجی بالا عنصر قرارگیری به حاشیه خارجی بالا پنجره‌ای که آن را شامل می‌کند، جابجا می‌شود.
right تعریف می‌کند که چگونه حاشیه خارجی راست عنصر قرارگیری به حاشیه خارجی راست پنجره‌ای که آن را شامل می‌کند، جابجا می‌شود.
bottom تعریف می‌کند که چگونه حاشیه خارجی پایین عنصر قرارگیری به حاشیه خارجی پایین پنجره‌ای که آن را شامل می‌کند، جابجا می‌شود.
left تعریف می‌کند که چگونه حاشیه خارجی چپ عنصر قرارگیری به حاشیه خارجی چپ پنجره‌ای که آن را شامل می‌کند، جابجا می‌شود.
overflow رویدادهایی که رخ می‌دهند وقتی محتوای عنصر از محدوده خود جا می‌افتد را تنظیم کنید.
clip شکل عناصر را تنظیم کنید. عناصر در داخل این شکل برش داده می‌شوند و سپس نمایش داده می‌شوند.
vertical-align روش قرارگیری عمودی عناصر را تنظیم کنید.
z-index ترتیب قرارگیری عناصر را تنظیم کنید.