Beginner in the world of CSS.
Currently, I am developing a Safari extension where clicking its toolbar button will display a 'dialog banner' (comprising text and a few buttons) on the web page. This banner, in the form of a div, is dynamically added to the page through the extension's End Script.
My dilemma lies in how to design the div in a way that ensures it remains visible regardless of the existing content on the web page, which I cannot control. I have tried setting the div's style as position:fixed and appending it as the first child of <body>. This works effectively on most pages as it remains at the top of the window regardless of scrolling.
However, I encountered issues on certain pages with their own header banners, such as and . On such pages, my div gets hidden underneath the existing banner. Even adjusting the z-index attribute of my div does not solve the problem.
Am I pursuing the impossible, or is it simply a matter of accepting the unpredictable nature of others' web page structures and seeking an alternative approach for my UI?