Um problema muito comum para quem usa flash combinado com html e css, apenas para destacar alguns detalhes, é o fato de o flash cobrir o conteúdo da página por padrão. Eu particularmente enfrentei este problema várias vezes ao tentar colocar um menu drop-down que ao ser visualizado deveria cobrir o flash. Mas o menu ficava sempre escondido atrás do flash.
Para solucionar o caso eu utilizei os seguintes conceitos:
- A propriedade z-index do CSS;
- posicionamento do CSS;
- As tags object e embed;
- e o atributo wmode do vídeo.
O z-index pelo que eu tenho percerbido e lido em diversos lugares só funciona em elementos html que estejam “posicionados”, ou seja, tenham o atributo position com o valor absolute, relative ou fixed.
Portanto, colocaremos o video flash dentro de uma div e aplicaremos o seguinte css a ela:
div#flash_div{
position: relative;
z-index: 0;
}
E devemos fazer o mesmo para os objetos que queremos que sobreponham o flash.
Como existem muitas divergências na renderização entre os browsers, é necessário fazer duas chamadas ao vídeo: uma por meio da tag object(a qual é aceita pelo Internet Explorer) e por meio da tag embed(aceita pelo firefox). Ambas as tags terão os mesmos atributos. E dentre eles deve-se setar o wmode do object e do embed para transparent:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="214" height="229" id="monitor" align=""> <param name="movie" value="images/monitor.swf"> <param name="quality" value="high"> <param name="wmode" value="transparent"> <embed wmode="transparent" src="images/monitor.swf" quality="high" bgcolor="#FFFFFF" width="214" height="229" name="monitor" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed> </object>Eu resolvi meu problema assim. Com apenas uma ressalva: essa solução não funciona para usuário do Linux, e não tenho conhecimento de nenhuma outra solução. Espero ter ajudado.
July 1st, 2007 12:27
show, aí me veio uma dúvida se isso serviria a ao select com o positon absolute, não sei se vc já passou por isso mais o select fica sobre a qualquer elemento, por exemplo se tivermos um menu suspenso com evento em javascript para ser mostrado, caso haja um select o mesmo fica sobre o submenu
desagradável… eu testei esse teste que vc sugeriu para flash mas para ele não funcionou 
vc já viu isso?
div#pos{ position : absolute; background-color : Aqua; padding : 10px; z-index :1; top : 0; left : 0; } select{ z-index : 2; position : relative; }
texto texto texto
texto texto texto texto
July 1st, 2007 12:29
opsssssss o conmentário tirou o meu html
<select > <option>texto</option> <option>texto</option> <option>texto</option>
</select> <div id="pos">texto texto texto texto </div>
July 1st, 2007 20:54
Danielle, não entendi mto bem o que vc quis dizer… vc quer q a div #pos cubra o select?
nunca me ocorreu algo parecido com o que vc disse nao…
mas se a div#pos tiver que sobrepor todos os selects, ela deve estar com o z-index maior que o do select…
July 2nd, 2007 11:09
correto, eu quero que a div cubra o select, não sei se vc fez o teste, mas não cobre nem com z-index
January 21st, 2008 22:20
Olá! Muito bom! Rápido e eficiente! Funcionou direitinho! vlw!
January 22nd, 2008 10:37
Danielle,
Desculpa a demora na resposta, mas eu realizei o teste alterando apenas um detalhe no CSS. E a div sobrepos o select, pelo menos no firefox. Não testei no IE.
Abaixo segue o CSS:
div#pos{ position : absolute; background-color : Aqua; padding : 10px; z-index :2; top : 0; left : 0; } select{ z-index : 1; position : relative; }
Vale ressaltar que qnto MAIOR o z-index, mais a frente fica o elemento. No caso eu troquei os z-index, para o select esta 2 e para a div estava 1.
February 11th, 2008 17:11
Muito obrigado!!!
Fucionó muy bien la solución!
Saludos, Guillermo (Argentina)
May 23rd, 2008 11:13
Poxa, foi de grande ajuda sua dica!!
Obrigado mesmo!
abraço
June 19th, 2008 17:42
Cara, você é 10.
Já estava desiludido com o flash, quase adotando uma solução em javascript ou applet.
Estão dizendo por ai que não tem solução hem!
Resolvido tanto pro Firefox e quanto para o IE.
Grande abraço!
July 7th, 2008 11:18
Essa dica é otima mesmo, mas eu to com um problema aqui que não encontro em lugar algum nem dúvidas nem respostas parecidas.. Tenho o menu em flash que fica na frente do texto como o exemplo explicado aqui.. otimo. O problema é que se existe algum link na div de texto atrás do flash, o link não funciona! aliais ele funciona mas na área em que coincide com a área do flash ele não ativa… poxa espero que você já tenha passado por isso pra me dar alguma dica.. Obrigada, abraços
July 7th, 2008 14:01
Taly,
Eu nunca me deparei com situações como a sua não. Um caso que eu aplico é quando o link fica por cima do flash.
No caso, existe um menu dropdown usando CSS que se utilizado, precisa cobrir o flash. E nesses casos, a técnica funciona bem. Mas no seu caso eu não consigo ver uma solução. Se o flash puder ficar por baixo da div de texto, então dá pra resolver o problema.
July 23rd, 2008 11:32
Pois é, tá difícil issooo=/.. vou ver se faço em css mesmo ou se arranjo algum javascript que possa alterar o z-index de acordo com o posicionamento no mouse..
Mas obrigada pela atenção!! abraços!
August 14th, 2008 10:30
Fala ae
eu to passando por esse problema… a galera que faz o css aqui da empresa preparou um menu que quando passa o mouse um sub menu “desce”, porem fica escondido atras de um applet… sei que swf e applet são bem diferentes… mas será que existe uma maneira de o menu não ficar atras do applet… Eles (a galera do css) ja tentaram de tudo… z-index, position etc, etc, etc… conheces alguma forma de contornar esse problema? ou seja, o menu não ficar atras do applet ? obrigado
September 8th, 2008 10:12
Olá meu amigo,
Estou precisando aplicar isso no meu código html. Na verdade, já apliquei, mas não surtiu efeito não. Quero que a div box2 fique por cima da div box1 que tem um flash dentro. Minha intenção depois é criar um campo de newsletter em cima e outro de busca para que a animação fique rolando por de traz deles. Segue meu código. O que eu fiz de errado?
layout
AC_FL_RunContent( ‘codebase’,’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','990','height','110','wmode','transparent','src','topo','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','topo‘ ); //end AC code
ddddddddddddddddddddddd
September 8th, 2008 10:13
Então, se o meu código não apareceu por completo na mensagem acima, por favor, entre em contato comigo e eu lhe passo. Preciso muito dessa ajudinha… um abraço!
October 23rd, 2008 18:23
z-index:-1;
esse é o certo
October 23rd, 2008 23:06
Julio, nunca trabalhei com applets, então fica até difícil responder sua pergunta.
Fábio, não sei por que o seu e-mail não chegou pra mim. Não tenho como lhe contactar. Se o problema persistir, me avise.
Kaue, não entendi direito o seu comentário.
November 11th, 2008 15:35
Cara, li seu post e gostei muito, pois no passado próximo tive a mesma prosopopéia de fazer um menu drop-down por cima de uma animação flash(desisti, inclusive, fiz o menu no próprio flash! rs). Mas hoje eu sei que se você pode fazer o flash ficar atrás de todos os elementos HTMl simplesmente configurando a animação no “publishing settings” do programa. Você habilita a pubicação em html e nas configurações, na opção window mode você seleciona a “transparent windowless”. Nem precisa de z-index. até mais
December 3rd, 2008 11:29
Fala Vinicius..
seguinte..to usando esse codigo que vc falou..
tenho um menu horizontal com submenus verticais e um flash embaixo
para o submenu aparecer em cima do flash…eu usei z-index: -1 pq com z-index: 0 nao fica por cima..nem no fire nem no ie..pode fazer o teste
o menu que eu estou usando é desse cara:
Menus drop-down horizontal-vertical (hv) e vertical-vertical (vv) até 4 níveis by Micox – elmicox.blogspot.com – Ver. 2.0 – 20/02/08 – Creative Commons License
tipo…com z-index: -1 … meu problema foi resolvido
agora estou com outro problema..
nesse flash que fica embaixo do menu…tem uma galeria de fotos… mas ela fica desabilitada…ai tirei o position: relative ai funcionou a galeria…o submenu fica em cima do flash..mas quando eu navego pelo submenus…eles somen..funciona somente no primeiro nivel do submenu…quando desco mais um nivel…ele some…espero que tenha entendido
se possivel…pode me adicionar no msn kauelima@gmail.com para nos batermos esse papo
December 3rd, 2008 11:37
fala vinicius…deleta meu coment anterior…nao sei qual foi a besteira que eu fiz aqui…mas ja ta tudo ok eehhehehehe
vls
December 4th, 2008 13:07
Cara!!!! Muito obrigado vc salvou o dia… Muito bom…
December 23rd, 2008 15:16
Só vim deixar meus agradecimentos, pois me ajudou a resolver o meu problema.
valeu
January 16th, 2009 15:09
Sensacional! Salvou o meu limite de sanidade do dia…
obrigado!
March 5th, 2009 11:34
Ainda não deu certo no meu, ja quebrei a cabeça e não consigo se alguém puder me ajudar eu agradeço muito, obrigado.
April 11th, 2009 12:41
Cara, você me salvou…muito obrigado…abraço
June 23rd, 2009 17:45
ohohohohohohoohohoho Funcionou e eu só editei o div! Tks!
March 15th, 2010 10:54
Você é o cara! funcionou e só editei – wmode=”transparent – no .
Sds.
July 21st, 2010 23:06
cara muito muito obrigada! salvou o meu dia \o/
November 11th, 2010 21:28
Até que enfim consegui resolver este problema, a muito tempo eu acabo deixando de lado alguns recursos porque a porcaria do flash atrapalha a visualização de alguns elementos flutuantes em CSS. Valeu.
November 29th, 2010 12:16
finalmente um post decente sobre o assunto!!!! eu infelizmente resolvia isso fazendo o flash sumir da tela quando o elemento em questão aparecia………
December 14th, 2010 09:21
Muito bom! funcionou perfeitamente! vou até guardar este link se caso eu esquecer.
January 14th, 2011 22:03
Obrigado a sua dica foi de grande ajuda.!!
March 2nd, 2011 12:48
sensacional, apanhei disso, procurei mtoo na net e sua dica foi certeira. obrigado e parabens
July 20th, 2011 18:35
Certeiro cara. Parabéns!!
October 5th, 2011 19:40
Cara,
Muito obrigado.
Me salvou.
Vou divulgar seu blog.
Abraço.
October 25th, 2011 14:12
[...] matéria do blog Meio Código que mostra como solucionar o problema do Flash que cobre qualquer parte do site (mesmo quando [...]
October 25th, 2011 14:16
Muito bom!
January 3rd, 2012 13:31
Boa matéria, foi ótima para aparecer os submenus do meu Portal e um pluguin lateral de redes sociais.
Obrigado amigo Feliz ano Novo.