在页面顶部注入div

Question

我正在编写一个Chrome扩展程序，在所有页面的顶部添加一个40px的条形图。 所以在我的内容脚本中，我将这个div附加到这样的页面：

let overlayDiv = document.createElement('DIV');
overlayDiv.id = "myOverlayDIV";
overlayDiv.innerHTML = 'Content goes here'
document.body.insertBefore(overlayDiv, document.body.firstChild);

我注入的CSS看起来像这样：

#myOverlayDIV {
    box-sizing: border-box;
    position: relative !important;
    width: 100% !important;
    top: 0px !important;
    z-index: 999999999 !important;
    text-align: center !important;
    height: 40px !important;
    border: 2px solid black;
    background-color: #9ccf1a
}

对于大多数页面来说，它的工作原理应该如此，但如果你去yahoo.com，它看起来像这样：

https://prnt.sc/hbnibw

我应该更改什么才能使此DIV始终位于页面顶部？