ویژگی position در CSS

تعریف و استفاده

ویژگی position نوع قرارگیری عناصر را مشخص می‌کند.

توضیح

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

لطفاً به:

آموزش CSS:محل‌دهی CSS

دستورالعمل HTML DOM:ویژگی position

مثال

محل‌دهی عنصر h2:

h2
  {
  position:absolute;
  left:100px;
  top:150px;
  }

تست کنید

جملات برنامه‌نویسی CSS

position: static|absolute|fixed|relative|sticky|initial|inherit;

مقدار ویژگی

مقدار توضیح
absolute

عناصر محلی‌سازی شده مطلق تولید می‌شوند، که نسبت به اولین عنصر والد غیر محلی‌سازی شده (static) قرار می‌گیرند.

موقعیت عنصر از طریق ویژگی‌های "left", "top", "right" و "bottom" تعیین می‌شود.
fixed

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

موقعیت عنصر از طریق ویژگی‌های "left", "top", "right" و "bottom" تعیین می‌شود.
relative

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

بنابراین، "left:20" 20 پیکسل به موقعیت چپ عنصر اضافه می‌کند.
static مقدار پیش‌فرض. بدون محل‌دهی، عنصر در جریان طبیعی ظاهر می‌شود (اعمال top, bottom, left, right یا z-index بی‌اثر می‌شوند).
inherit این تعریف می‌کند که باید مقادیر position از عنصر والد به عنصر خود ارث برده شوند.

جزئیات فنی

مقدار پیش‌فرض: static
erbیت‌پذیری: no
نسخه: CSS2
جملات برنامه‌نویسی: object.style.position="absolute"

مثال عملی

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

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این ویژگی هستند.

Chrome IE / Edge Firefox Safari Opera
1.0 7.0 1.0 1.0 4.0