Javascript for placing masterslide on top not working

Thank you. I will look into it.

I modified the script and used this one and it seems to do the trick

function bringHeaderToFront() {
    var header = document.querySelector('[data-acc-text="header"]');
    if (header) {
        header.style.zIndex = "9999"; 
        console.log("Header found and zIndex updated");
    } else {
        console.log("Header not found");
    }
}

// Run on first slide load
bringHeaderToFront();

// Also detect when a new slide loads
var observer = new MutationObserver(function() {
    bringHeaderToFront();
});

observer.observe(document.body, { childList: true, subtree: true });

Agree I would use a layer for overlays

It probably has to do with the stacking contexts withing the document. While the z-index specifies a stacking order, the overall order is relative. Think of stacking contexts as layers in an illustration application. Everything within a layer is stacked in the (z-index) order specified, but the individual layers are stacked in their own order relative to other layers. Assigning a high z-index does not assure top positioning if another stacking context has a higher precedence.

Usually, layers on the master will always appear above slide content. If you want something to always be on top, put it in a layer on the master and make that layer visible. This is often done to create navigation menus or other overlays you need to ensure are topmost when displayed.

See this page if you care to learn more about what can specify new stacking contexts within a document.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context