Skip to main content
2 de 3
adicionou 390 caracteres ao conteúdo
Diego Henrique
  • 2,9mil
  • 5
  • 22
  • 56

Como sobrepor div flutuante sobre demais elementos da página web?

Estou criando um novo plugin bookmarklet que será aplicado sobre qualquer página de video do Youtube, onde tenho que adicionar uma div flutuante no body, fazendo assim o appendChild no DOM.

No entanto esta ocorrendo uma falha, esta div flutuante fica atraz do Player e das Thumbnails, tornando um incômodo para quem vai visualizá-la.

O que preciso é sobrepor a div futuante sobre o Player e Thumbnails.

Para se ter uma idéia real do que ocorre, convido você a executar o plugin abaixo em seu navegador web, com um vídeo qualquer do Youtube, pré-carregado.

#Código

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>'

    ];

}());

<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>

Diego Henrique
  • 2,9mil
  • 5
  • 22
  • 56