Ինչպե՞ս կարող ենք մեկ տարր ավելի բարձր դարձնել մյուսի նկատմամբ ձևավորման մեջ։

Կան մի քանի եղանակներ՝ մի տարր ավելի բարձր դարձնելու համար մյուսից՝

• z-index: Ամենատարածված միջոցը։ Կիրառվում է դիրքավորված տարրերին (որոնք ունեն position, բացի static-ից): Բարձր արժեք ունեցող z-index-ով տարրն ավելի բարձր կլինի նույն շերտում գտնվող մյուս տարրերի նկատմամբ:

  /* Տարր-1-ը կլինի ցածր Տարր-2-ից */
  .element-1 {
    position: relative;
    z-index: 1;
  }
  
  .element-2 {
    position: relative;
    z-index: 2;
  }
  

• DOM կարգը: Եթե բացակայում է հստակ դիրքավորումը և z-index, ապա HTML կոդում ուշադիր տեղադրված տարրերը տեսողականորեն ավելի վերևում կլինեն նախորդներից:

  <!-- Տարր-2-ը կլինի վերև Տարր-1-ից -->
  <div class="element-1"></div>
  <div class="element-2"></div>
  

• Դիրքավորման հատկություններ: position: absolute կամ position: fixed օգտագործելը ավտոմատ կերպով ստեղծում է նոր շերտային կոնտեքտ և բարձրացնում է տարրին՝ դուրս գալով սովորական բովանդակության հոսքից:

  .element-absolute {
    position: absolute;
    /* Այլ դիրքավորման հատկություններ */
  }
  

• Flexbox/Grid (Order): Flexbox և Grid Layout-ներում order հատկությունը թույլ է տալիս փոխել տարրերի տեսողական կարգը, սակայն դա չի ազդում z-index-ի կոնտեքստի վրա:

  .container {
    display: flex;
  }
  
  /* Տարր-2-ը տեսողականորեն առաջին կլինի */
  .element-1 {
    order: 2;
  }
  
  .element-2 {
    order: 1;
  }
  

• Տրանսֆորմացիաներ (Transform): transform հատկությունը ստեղծում է նոր տեղական կոնտեքտ, և փոխարկված տարրն կարող է երևալ վերևում՝ նույնիսկ առանց հստակ դիրքավորման և z-index-ի:

  .element-transformed {
    transform: translateZ(1px); /* կամ այլ փոխարկում */
  }
  

Ընտրությունը կախված է կոնտեքստից և ցանկալի ազդեցությունից: Հաճախ z-index-ը օգտագործվում է position-ի հետ միասին՝ վերահսկելու համար շերտավորումը։