Flash cobrindo conteúdo (solução)
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” align=”" 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 at 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 at 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 at 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 at 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 at 22:20
Olá! Muito bom! Rápido e eficiente! Funcionou direitinho!
vlw!
January 22nd, 2008 at 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 at 17:11
Muito obrigado!!!
Fucionó muy bien la solución!
Saludos,
Guillermo (Argentina)
May 23rd, 2008 at 11:13
Poxa, foi de grande ajuda sua dica!!
Obrigado mesmo!
abraço
June 19th, 2008 at 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 at 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 at 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 at 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 at 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