position

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

static

.static {
  position: static;
}
<div class="static">

مقدار پیش فرض static است. یک عنصر با position: static; به شکل خاصی جایگذاری نمی‌شود. یک عنصر static را جایگذاری نشده می‌خوانند و یک عنصر، به هر مقدار دیگری برای position را جایگذاری شده گویند.

</div>

relative

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}
<div class="relative1">

relative هم مثل static رفتار میکند، مگر آنکه ویژگی‌های اضافه ای برای آن استفاده شود.

</div>
<div class="relative2">

با مقداردهی کردن top، right، bottom، و left برای یک عنصر با جایگذاری relative، می‌توان آن را از جای اصلی اش جا به جا کرد. سایر عناصر کنار این عنصر، به فضای خالی که با جا به جا شدن آن در جای اصلی اش ایجاد شده است، نفوذ نخواهند کرد.

</div>

fixed

<div class="fixed">

سلام، هنوز لازم نیست که به من توجه کنید!

</div>

یک عنصر با جایگذاری 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;
}
<div class="relative">

مقدار position برای این عنصر relative است. اگر این برای این عنصر position: static; باشد، آنگاه عنصر فرزند، این عنصر را تکذیب کرده و از body برای جایگذاری استفاده می‌کند.

<div class="absolute">

جاگذاری این عنصر absolute . جایگذاری آن نسب به عنصر پدرش است.

</div>
</div>

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

  • Creative Commons License
  • Ads by Bocoup