В чем разница работы z-index в HTML и SVG тегах?

В чем разница работы z-index в HTML и SVG тегах

Введение

z-index работает по-разному в HTML (в боксовой модели) и SVG (в графическом контексте). Понимание этих различий критически важно для управления наложением элементов.

1. z-index в HTML/CSS

z-index в HTML работает с контекстом наложения (stacking context) и требует position:

<!-- ✓ Работает: элемент с position -->
<div style="position: relative; z-index: 10;">Box 1</div>

<!-- ✗ Не работает: нет position, z-index игнорируется -->
<div style="z-index: 10;">Box 2</div>

/* ✓ Работает с position -->
.box-a {
  position: absolute;
  z-index: 10;
}

/* ✗ z-index не работает без position -->
.box-b {
  z-index: 10; /* Игнорируется! */
}

/* ✓ Работает с position: relative -->
.box-c {
  position: relative;
  z-index: 10;
}

/* ✓ Работает с position: fixed -->
.box-d {
  position: fixed;
  z-index: 10;
}

/* ✓ Работает с position: sticky -->
.box-e {
  position: sticky;
  z-index: 10;
}

/* ✓ Работает с flexbox/grid (контекст наложения) -->
.flex-container {
  display: flex;
  z-index: 10; /* Создает контекст наложения -->
}

/* ✓ Работает с opacity < 1 (создает контекст наложения) -->
.box-f {
  opacity: 0.9;
  z-index: 10;
}

2. z-index в SVG

SVG не требует position для работы z-index. В SVG порядок наложения определяется порядком в DOM (документе) и значением z-index:

<!-- В SVG элементы, определенные позже, находятся сверху -->
<svg width="200" height="200">
  <!-- Этот прямоугольник будет ПОД кругом -->
  <rect x="20" y="20" width="100" height="100" fill="red" />
  
  <!-- Этот круг будет НАД прямоугольником (определен позже) -->
  <circle cx="100" cy="100" r="50" fill="blue" />
</svg>

3. Сравнительная таблица

4. HTML: контекст наложения (Stacking Context)

Контекст наложения — это трехмерное пространство, где z-index имеет значение:

<style>
  .parent-1 {
    position: relative;
    z-index: 1; /* Создает стек контекст -->
  }
  
  .child-1 {
    position: absolute;
    z-index: 999; /* z-index 999, но ВНУТРИ parent-1 контекста -->
  }
  
  .parent-2 {
    position: relative;
    z-index: 2; /* z-index выше, чем parent-1 -->
  }
  
  .child-2 {
    position: absolute;
    z-index: 1; /* z-index 1, но в контексте parent-2 -->
  }
</style>

<!-- child-1 будет ПОД child-2, потому что parent-2 выше parent-1 -->
<div class="parent-1">
  <div class="child-1">Z-index: 999</div>
</div>

<div class="parent-2">
  <div class="child-2">Z-index: 1</div>
</div>

5. HTML: примеры контекста наложения

/* Эти свойства СОЗДАЮТ контекст наложения -->

/* 1. position + z-index -->
element {
  position: relative;
  z-index: 1; /* Создает контекст -->
}

/* 2. opacity < 1 -->
element {
  opacity: 0.9; /* Создает контекст -->
}

/* 3. transform -->
element {
  transform: rotate(45deg); /* Создает контекст -->
}

/* 4. filter -->
element {
  filter: blur(5px); /* Создает контекст -->
}

/* 5. flexbox/grid с z-index -->
element {
  display: flex;
  z-index: 1; /* Создает контекст -->
}

/* 6. mix-blend-mode -->
element {
  mix-blend-mode: multiply; /* Создает контекст -->
}

6. SVG: примеры

<!-- SVG порядок наложения основан на DOM порядке -->
<svg width="300" height="300">
  <!-- Красный прямоугольник будет ПОД синим (определен первым) -->
  <rect x="10" y="10" width="100" height="100" fill="red" />
  
  <!-- Синий прямоугольник будет НАД красным (определен вторым) -->
  <rect x="50" y="50" width="100" height="100" fill="blue" />
  
  <!-- z-index в SVG работает, но наследует порядок DOM -->
  <circle cx="150" cy="150" r="50" fill="green" z-index="999" />
</svg>

<!-- Визуальный порядок: красный -> синий -> зеленый (снизу вверх) -->

7. Практический пример: модальное окно в HTML

<style>
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999; /* Под модалью -->
  }
  
  .modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    z-index: 1000; /* Над оверлеем -->
  }
  
  .popup {
    position: absolute;
    z-index: 1001; /* Над модалью -->
  }
</style>

<div class="overlay"></div>
<div class="modal">
  <div class="popup">Alert</div>
</div>

8. Практический пример: SVG слои

<svg width="300" height="300" style="border: 1px solid black;">
  <!-- Фоновый слой -->
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,0)" />
      <stop offset="100%" style="stop-color:rgb(255,0,0)" />
    </linearGradient>
  </defs>
  
  <!-- Слой 1: фон -->
  <rect width="300" height="300" fill="url(#grad)" />
  
  <!-- Слой 2: круги -->
  <circle cx="80" cy="80" r="40" fill="blue" />
  <circle cx="220" cy="220" r="40" fill="green" />
  
  <!-- Слой 3: текст (сверху всего) -->
  <text x="150" y="150" font-size="30" fill="white" text-anchor="middle">
    SVG Layers
  </text>
</svg>

9. Проблема: неработающий z-index в HTML

<!-- ❌ Проблема: z-index не работает без position -->
<div style="z-index: 999; background: red; width: 100px; height: 100px;">
  Box 1
</div>
<div style="background: blue; width: 100px; height: 100px;">
  Box 2
</div>

<!-- ✓ Решение: добавить position -->
<div style="position: relative; z-index: 999; background: red;">
  Box 1
</div>
<div style="position: relative; background: blue;">
  Box 2
</div>

10. Проблема: z-index в контексте наложения

<style>
  .parent-a {
    position: relative;
    z-index: 1; /* Создает контекст -->
  }
  
  .parent-a .child {
    position: absolute;
    z-index: 9999; /* Большой z-index, но внутри parent-a контекста -->
    background: red;
  }
  
  .parent-b {
    position: relative;
    z-index: 2; /* Выше parent-a -->
  }
  
  .parent-b .child {
    position: absolute;
    z-index: 1; /* Маленький z-index, но в контексте parent-b -->
    background: blue;
  }
</style>

<!-- Голубой элемент будет НАД красным, потому что parent-b > parent-a -->
<div class="parent-a">
  <div class="child">Red (z-index: 9999)</div>
</div>

<div class="parent-b">
  <div class="child">Blue (z-index: 1)</div>
</div>

11. JavaScript для управления z-index

// HTML элементы
const el1 = document.getElementById('element1');
const el2 = document.getElementById('element2');

// Изменение z-index
el1.style.zIndex = '100';
el2.style.zIndex = '50';

// Получение текущего z-index
const zIndex = window.getComputedStyle(el1).zIndex;
console.log(zIndex); // "100"

// SVG элементы (работает так же)
const svgCircle = document.querySelector('circle');
svgCircle.style.zIndex = '10';

12. SVG: управление порядком через JavaScript

// В SVG часто переупорядочивают элементы через DOM
const svg = document.querySelector('svg');
const circle = document.querySelector('circle');

// Переместить элемент в конец (на вершину)
svg.appendChild(circle);

// Переместить элемент в начало (в низ)
svg.insertBefore(circle, svg.firstChild);

13. Ключевые различия: итоговая таблица

Заключение

• HTML/CSS: z-index требует position и создает контекст наложения (stacking context)
• SVG: z-index работает, но порядок наложения в первую очередь определяется порядком элементов в DOM
• HTML: высокое значение z-index внутри контекста может быть перебито более низким значением в другом контексте с большим z-index
• SVG: просто переместите элемент в конец SVG для размещения сверху
• Для сложных иерархий в HTML используй контексты наложения для лучшего контроля
• В SVG используй JavaScript для переупорядочения элементов, если нужна динамическая работа