Z-индексация SVG-элемента

Question

Привет У меня возникла проблема с настройкой Z-индекса элемента SVG относительно элемента HTML

Мой элемент HTML (всплывающее окно) имеет z-индекс 4 Мой элемент SVG (строка) имеет индекс z 3

Но все же мой SVG-элемент перекрывает всплывающее окно html. Если я уменьшу z-index на svg, он исчезнет, ​​как на скриншотах ниже

SVG z-index @ 3

SVG Z index @ 2

Можно ли как-нибудь настроить z-индекс так, чтобы линия проходила за всплывающим окном?

Спасибо

EDIT:

вот что я пробовал до сих пор

Поповер состоит из 4 делителей

.markerBubble {
  position: absolute;
  background: white;
  border: 2px solid white;
  padding: 10px;
  border-radius : 4px;
  box-shadow:4px 6px #888888;
  max-width: 250px;
  max-height:150px;
  overflow-y:auto;
  z-index: 4;
}

.markerBubbleouter{
  display: flex;
  
}
 .markerBubble1{
  width:60%;
  padding-right:10px;
  text-align:right;
 }
 .markerBubble2{
  width:30%;
  text-align:left;
 }

markerBubble содержит 3 внешних элемента div, 1 и 2, поэтому я поместил z-index на markerBubble.

Для линии SVG я поставил следующий CSS

.leader-line{
  position: relative;
z-index: 3;
}