Pfthb

I am creating a browser extension, I am testing it on Chrome and Edge for now.
It puts a svg drawing upon some words that are in the web page adjusting its size according to the font.

Simple divs with the svg inside are added to the DOM.
I put zIndex= auto or inherit but I found a strange behaviour on a certain web page:
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript

If the extension puts a drawing on the words matching "tabs" the first occurrence in the title you can see on top of the page is not seen at all.
I checked with the developer tools and the div is present like others, just it does not appear.

function createDiv(x,y,size) 
 var scrollX=window.scrollX;
 var scrollY=window.scrollY;
 var div=null;div=document.createElement('div');


 div.className=CLASS_NAME;
 div.style.position = 'absolute';
 var color=COLOR;

 div.style.opacity='0.6';

 div.style.zIndex='auto';

 div.style.top=(scrollY+(y)-size/4)+'px';
 div.style.height=(size)+'px';
 div.style.left=(scrollX+(x))+'px';
 if (scrollX+(x)+size>window.innerWidth) div.style.left=window.innerWidth-size;
 div.style.width=(size)+'px';

 div.innerHTML='<svg ...>';
 div.style.visibility='visible';
 return div;
 ;
....
div=createDiv(param1,param2,param3);
document.body.appendChild(div);

(52.71875 118 110 for the parameters should be matching the first occurrence)

Is it a zIndex issue? Or another kind of HTML problem?