2010-01-21 12 views
7

Necesito colocar una etiqueta div encima literalmente de todo lo demás en la página. He leído que ajustar wmode param a opaque lo hará, pero también escuché que eso solo afectará a IE. ¿Es esto cierto? ¿Cómo lo haces?Colocar un div delante de un flash incrustado

+0

¿No te refieres a 'wmode = 'transparent''? –

+0

'opaco' y' transparente' fuerzan al flash a dibujarse como parte del flujo de página, con efectos transparentes que permiten la transparencia desde el flash. 'window' (valor predeterminado) hará que la película flash se muestre en su propio búfer, encima del diseño de la página. – Ipsquiggle

Respuesta

7

En su etiqueta applet flash, simplemente tener esto:

<object id='flashObject' ....> 
    <param ....> 
    <param name='wmode' value='opaque'> 
    <embed ... wmode='opaque'> 
    </embed> 
</object> 

que debe tener cuidado de él.

Tenga en cuenta que la desventaja de esto es que ralentiza el procesamiento tanto de la película flash como de los elementos de página, pero no debería ser un problema en la mayoría de los casos.

Además, al incluir esto como un parámetro de objeto y un atributo de inserción, funciona en todos los navegadores principales.

Editar, según el comentario de MidnightLighning:

Una vez que el objeto flash se prepara de esta manera, es necesario hacer flotar la div sobre la página, así:

<body> 
    <object> ... <!-- this is your flash movie --> </object> 
    <div id="floater">The Floating Div</div> 
</body> 

A continuación, crear su CSS como esto:

#flashObject { position:relative; z-index:1 } 
#floater { position:absolute; z-index:100; top:0; left:0; } 
+0

Lo intenté, no funcionó: - \ – Webnet

+0

¿Usó luego 'position: absolute;' para colocar su DIV sobre el elemento Flash? El código anterior prepara el elemento Flash correctamente, pero luego debe colocar el DIV sobre él; tal vez asignar un 'z-index' al que contiene el elemento Flash, y el DIV que lo revisa? – MidnightLightning

+1

@Webnet: ¿Qué no funcionó exactamente? ¿El flash seguía apareciendo en la parte superior de la div? ¿El div no estaba posicionándose correctamente? Recortar su página hasta un ejemplo mínimo que demuestre el problema y publique el código sería de gran ayuda. – Ipsquiggle

0

En mi sitio del cliente, he utilizado html:

<div id="photo> 
    <div id="flash"></div> 
    <ul id="navigation">..</ul> 
</div> 

css:

#flash { z-index: 6; } 
#navigation { z-index: 8; margin-top: -100px; } 

y luego sustituyo #flash con mi flash de swf con SWFObject (http://code.google.com/p/swfobject)

Así que, básicamente, z-index y de alguna manera inteligente para incrustar debe trabajo:)

Cuestiones relacionadas