Как мы можем сделать один элемент выше другого в верстке?

Существует несколько способов сделать один элемент выше другого в верстке:

• 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 Layouts свойство 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.