Ի՞նչ է տարբերությունը CSS-ում տարրերի դիրքավորելու…

static - Անհատական դիրքավորումը։ Էլեմենտը դիրքավորվում է փաստաթղթի ստանդարտ հոսքի համաձայն։ top, right, bottom, left հատկությունները չեն ազդում։
relative - Էլեմենտը դիրքավորվում է իր նորմալ դիրքից։ top, right, bottom, left հատկությունները տեղափոխում են այն սկզբնական դիրքից, բայց զբաղեցրած տեղը մնում է։
absolute - Էլեմենտը ամբողջությամբ հեռացվում է փաստաթղթի նորմալ հոսքից։ Նրա դիրքը որոշվում է top, right, bottom, left հատկություններովամենամոտ դիրքավորված ծնողի նկատմամբ (որին վերագրված էposition: relative, absolute, fixedկամsticky)։ Եթե նման ծնողներ չկան, դիրքը որոշվում է <html>` սկզբնական բլոկի նկատմամբ։
fixed - Էլեմենտը ամբողջությամբ հեռացվում է փաստաթղթի նորմալ հոսքից։ Նրա դիրքը որոշվում է top, right, bottom, left հատկություններով` դիտարկման պատուհանի (viewport) նկատմամբ։ Էլեմենտը մնում է տեղում էջի սլաքի ժամանակ։
sticky - Էլեմենտը դիրքավորվում է որպես relative, մինչև որ սլաքը չհասնի նշված դիրքին (որոշվում է top, right, bottom, left), ապա նրա դիրքը դառնում է fixed։

Տարբերությունների աղյուսակ՝

Գծագիր	`static`	`relative`	`absolute`	`fixed`	`sticky`
Դոկումենտի հոսք	սովորական	պահպանում է	հեռացվում է	հեռացվում է	սկզբում սովորական, ապա հեռացվում է
Թվային (`top` և այլն)	Ոչ	հարաբերական իր նկատմամբ	հարաբերական նախատիպի/դիտարկման պատուհանի նկատմամբ	հարաբերական դիտարկման պատուհանի նկատմամբ	հարաբերական իր նկատմամբ, ապա դիտարկման պատուհանի նկատմամբ
Սլաքի ժամանակ	Սլաքվում է	Սլաքվում է	մնում է տեղում (եթե նախատիպը `fixed`) կամ սլաքվում է նախատիպի հետ	մնում է տեղում	սկզբում սլաքվում է, ապա մնում է տեղում

Օրինակ՝

.static-box {
  position: static; /* Դիրքավորումը ըստ նախնական արժեքի */
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.relative-box {
  position: relative;
  top: 20px; /* Թվային վերև ուղղությամբ */
  left: 20px; /* Թվային աջ ուղղությամբ */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

.absolute-container {
  position: relative; /* Դիրքավորված նախատիպ */
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.absolute-box {
  position: absolute;
  top: 50px; /* հարաբերական կոնտեյների նկատմամբ */
  left: 50px; /* հարաբերական կոնտեյների նկատմամբ */
  width: 50px;
  height: 50px;
  background-color: lightcoral;
}

.fixed-box {
  position: fixed;
  bottom: 10px; /* դիտարկման պատուհանի նկատմամբ */
  right: 10px; /* դիտարկման պատուհանի նկատմամբ */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* կպչում է դիտարկման պատուհանի վերևին */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* մյուս տարրերի վրա անցնելու համար */
}

Ի՞նչ է տարբերությունը CSS-ում տարրերի դիրքավորելու տարբեր մեթոդների միջև։