position

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

static

.static {
  position: static;
}

relative

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

fixed

یک عنصر با جایگذاری fixed، جایگذاری اش relative است، اما نه نسبت به عنصر پدر، بلکه نسبت به تمام صفحه، یعنی viewport، که این بدان معنی است که این عنصر همواره در جایش ثابت است، حتی اگر که صفحه scroll شود. درست مانند relative، صفات top، right، bottom، و left به کار می‌روند.

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

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

یک عنصر ثابت، در صفحه، در آنجایی که باید می‌بود (و از آن جا به جا شد) هیچ فضای خالی ایجاد نمی‌کند.

مرورگر‌های موبایل، به شکل اعجاب آوری از عنصر‌های ثابت، به شکلی متنوع پشتیبانی می‌کنند. در این باره می‌توانید در اینجا بیشر بیاموزید.

absolute

مقدار absolute نیز مانند حالت قبل است. با این تفاوت که جایگذاری در آن وابسته به نزدیک ترین پدر جایگذاری شده است و نه viewport. اگر یک عنصر با جایگذاری absolute هیچ پدر جایگذاری شده ای نداشته باشد، آنگاه از body برای جایگذاری استفاده می‌کند و با scroll کردن صفحه بالا و پایین می‌کند. دقت شود که یک عنصر جایگذاری شده، به هر عنصری گفته می‌شود که در آن position هر چیزی باشد غیر از static.

در اینجا یک مثال ساده داریم:

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

این ویژگی کمی ابهام دارد، اما برای ساخت پیکربندی به کمک CSS خیلی کلیدی است. در صفحه ی بعد با استفاده از position یک مثال عملی را پیاده سازی می‌کنیم.