Ի՞նչ հատկություններ եք գիտակցում position: sticky հատկության մասին։

position: sticky – դա position: relative և position: fixed-ի միաձուլում է:

• Նախնական վարքագիծ: Էլեմենտը պահում է position: relative-ի նման, մնալով նորմալ փաստաթղթի հոսքում:
• Քաշման ժամանակ: Երբ էլեմենտը հասնում է սահմանված տեղափոխությանը (օրինակ, top: 0) իր սքրոլինգ կոնտեյների կամ տեսադաշտի (viewport) նկատմամբ, այն "կպչում" և պահվում է position: fixed-ի նման, մնալով տեսանելի այդ դիրքում՝ շարունակելով սքրոլը:
• Տեղաշարժ: Կարգավորվում է top, right, bottom, left հատկություններով։ Պետք է օգտագործել առնվազն մեկը՝ ճիշտ աշխատանքի համար:
• Սքրոլ կոնտեյներ (scroll container/containing block): Էլեմենտը "կպչում" է իր ծնողական բլոկի սահմաններում (containing block), որը սովորաբար համապատասխանում է ամենամոտ այն նախնինին, որը ունի սքրոլինգի հնարավորություն կամ որոշակի ձևավորման կոնտեքստ։ Եթե միայն body/html-ն է սքրոլվում, ապա կպչումը կլինի տեսադաշտի նկատմամբ:
• Կցում: Կպչուն էլեմենտը կարող է անցնել իր տակ գտնվող բովանդակությանը, նման position: fixed-ի:
• Z-индекс: Կցման վարքագիծը ազդում է z-index-ից:
• Հատկություններ:
  • Չաշխատում է, եթե ծնողական էլեմենտը ունի overflow: hidden, overflow: auto կամ overflow: scroll, որոնք կտրում են բովանդակությունը:
  • Էլեմենտը կարող է "կպչել"` եթե հասնի իր սքրոլինգ կոնտեյների եզրին:
• Օգտագործում: Հաճախ օգտագործվում է կպչուն գլխագրեր, նավիգացիոն պանելներ կամ կողային տարրեր ստեղծելու համար, որոնք մնում են տեսանելի՝ հիմնական բովանդակության սքրոլի ժամանակ:

/* Օրինակ օգտագործման */
.sticky-header {
  position: sticky;
  top: 0; /* Կպչում է տեսադաշտի վերին մասին կամ կոնտեյների */
  background-color: white;
  padding: 10px;
  z-index: 10; /* Համոզվում է, որ գլխագրը վերևում է մյուս բովանդակությունից */
}