Ի՞նչ տարբերակներ կան CSS-ում տարրերի դիրքավորելու համար։

CSS- ում կան մի քանի հիմնական տարբերակներ էլեմենտների դիրքավորելու համար:

• static — նախնական դիրքավորում։ Էլեմենտները տեղադրված են փաստաթղթի հոսքում, առանց տեղաշարժի:
• relative — էլեմենտը դիրքավորվում է իր նորմալ դիրքից։ Կարող է տեղաշարժվել top, left, bottom, right-ով, բայց մնում է հոսքի մեջ:
• absolute — էլեմենտը դիրքավորվում է ամենամոտ static-ից տարբեր դիրք ունեցող նախնուց։ Ելնում է հոսքից:
• fixed — էլեմենտը ամրացված է բրաուզերի պատուհանին և չի շարժվում սքրոլի ժամանակ։ Ելնում է հոսքից:
• sticky — էլեմենտը պահում է relative-ական դիրք մինչև այն հասնի սահմանված դիրքին սքրոլի ժամանակ, հետո դառնում է fixed:

Բացի դիրքավորումից, էլեմենտների դասավորության համար հաճախ օգտագործվում են.

• Flexbox — ճկուն մոդել՝ ուղղահայաց կամ հորիզոնական դասավորության համար:
• Grid — երկչափ ցանցային մոդել՝ էլեմենտների տեղադրության համար:
• float — հնացած մեթոդ՝ էլեմենտների շրջապատման համար, նախկինում օգտագործվում էր սյունակներ ստեղծելու համար, այժմ՝ ավելի քիչ:

Օրինակ position-ի օգտագործման:

.element {
  position: absolute;
  top: 10px;
  left: 20px;
}