How to overlay floating div on other elements of the web page?

Question

I am creating a new plugin bookmarklet which will apply on any video page of Youtube, where I have to add a div floating in the body, thus doing the appendChild in the GIFT.

However a fault is occurring, this div floating through the Player and of Thumbnails, making it a nuisance for those who view it.

What I need is to override div futuante on the Player and Thumbnails.

To get a real idea of what happens, I invite you to run the plugin below in your web browser, with any video from Youtube, pre-loaded.

Code

javascript: (function() {

    var add = document.createElement('div');

    add.id = "pop";

    add.style.display = "block";

    add.style.position = "fixed";

    add.style.top = "0%";

    add.style.left = "0%";

    add.style.width = "100%";

    add.style.height = "100%";

    add.style.background = "black";

    add.style.opacity = ".80";

    document.body.appendChild(add);   

    document.getElementById("pop").innerHTML = [

        '<div style="display: block;position: fixed;top: 50%;left: 50%;margin-left: -150px;margin-top: -100px;padding: 10px;width: 300px;height: 200px;border: 1px solid #d0d0d0;background: whitesmoke;">' +

        '<span style="float:right;"><a href="javascript:(function(){document.getElementById(\'pop\').style.display=\'none\';}());">[Fechar]</a></span>' +

        '<br><br>' +

        '</div>'

    ];

}());

Now the pre-formatted code for bookmarklet

<a href="javascript: (function() { var add = document.createElement('div'); add.id = 'pop'; add.style.display = 'block'; add.style.position = 'fixed'; add.style.top = '0'; add.style.left = '0'; add.style.width = '100%'; add.style.height = '100%'; add.style.background = 'black'; add.style.opacity = '.80'; document.body.appendChild(add); document.getElementById('pop').innerHTML = '<div style=\'display: block;position: fixed;top: 50%;left: 50%;margin-left: -150px;margin-top: -100px;padding: 10px;width: 300px;height: 200px;border: 1px solid #d0d0d0;background: whitesmoke;\'><span style=float:right;><a href=javascript:(function(){document.getElementById(\'pop\').style.display=\'none\';}());>Fechar</a></span><br><br></div>' }());">BookMarklet</a>

<pre>

Clique e Arraste-o para barra de marcadores de seu navegador

Abra um link do video do youtube por exemplo - <a href="https://www.youtube.com/watch?v=DipPJp1Ls5E">https://www.youtube.com/watch?v=DipPJp1Ls5E</a>

Aguarde o carregamento completo da página do video

E logo clique sobre este plugin ja incluso na sua barra de favoritos

Agora confira o que acontece, como descrevi na pergunta

</pre>

Answer 1

Use the property z-index with the value 999 in the Shoes of your div with the id="pop", I think this is what you want

javascript: (function() {

   var add = document.createElement('div');

   add.id = "pop";

   add.style.zIndex = "999";

   add.style.display = "block";

   add.style.position = "fixed";

   add.style.top = "0%";

   add.style.left = "0%";

   add.style.width = "100%";

   add.style.height = "100%";

   add.style.background = "black";

   add.style.opacity = ".80";

   document.body.appendChild(add);   

   document.getElementById("pop").innerHTML = [

        '<div style="display: block;position: fixed;top: 50%;left: 50%;margin-left: -150px;margin-top: -100px;padding: 10px;width: 300px;height: 200px;border: 1px solid #d0d0d0;background: whitesmoke;">' +

        '<span style="float:right;"><a href="javascript:(function(){document.getElementById(\'pop\').style.display=\'none\';}());">[Fechar]</a></span>' +

        '<br><br>' +

        '</div>'

   ];

}());

just need to add add.style.zIndex = "999"; on its list of properties