نحوه قرار دادن عناصر با استفاده از CSS

این پست در ابتدا در thedevspace.io منتشر شد. همه چیز شما برای تسلط بر توسعه وب نیاز دارید ، همه در یک مکانبشر

در position ویژگی کنترل نحوه قرار دادن یک عنصر را کنترل می کند. پنج روش موقعیت مختلف وجود دارد ، از جمله staticبا relativeبا fixedبا absoluteوت stickyبشر static روش موقعیت یابی پیش فرض است ، به این معنی که عنصر به هیچ وجه خاص قرار نمی گیرد.

همه چیز از شروع جالب تر می شود relative موقعیت

موقعیت نسبی

با position بریدن relative، این عنصر نسبت به موقعیت پیش فرض آن قرار می گیرد. با تنظیم leftبا rightبا top، یا bottom خواص

 class="static">Static
 class="relative">Relative

.static {
  position: static;
}

.relative {
  position: relative;
  top: 10px;
  left: 20px;
}

به نسخه ی نمایشی مراجعه کنید

موقعیت ثابت

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

 class="fixed">Fixed

.fixed {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

به نسخه ی نمایشی مراجعه کنید

با هم ، right وت bottom خواص لنگر می زند

 class="relative">
  Relative
  
 class="absolute">Absolute

.absolute {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

Lorem ipsum. . .

. . .

 class="sticky">Sticky

. . .

.sticky {
  position: sticky;
  top: 10px;

  border: solid orange 2px;
  background-color: bisque;
  width: 100%;
  height: 100px;
}