როგორ შეგვიძლია ერთ ელემენტს მეორეზე მაღალი გავხადოთ განლაგებაში?

რამდენიმე გზა არსებობს ერთ ელემენტს მეორე ელემენტზე მაღლა დაყენებისათვის განლაგებაში:

• z-index: ყველაზე გავრცელებული მეთოდი. გამოიყენება პოზიციონირებულ ელემენტებზე (რომლებსაც აქვთ position, განსხვავებული static-ისგან). მაღალი მნიშვნელობის z-index იქნება უფრო მაღლა იმავე ნაგებობაში (stacking context).

  /* ელემენტი-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 ერთად.