Div por ensima de todo

ONahuelO · #1 (**permalink**) 26/02/2010, 09:19

Hola, haciendo un menu me tope con el problema que me queda abajo del flash:

La forma que inserto el flas en la web es con js, para que me quede trasparente, aca esta el codigo:

Código:

<div id="Pagina">
<div id="bodywrap">
<div id="header">
 <div  style=" background-image:url(menu_bg.png); height:60px; visibility:visible; position:relative;">
MENU
 </div>	   
<div id="visual">
<script type="text/javascript">Embed.Flash('http://10.0.0.3/main.swf', '975', '518', 'transparent', 'MainVisual', 'MainVisual', 'xmlLocation=http://10.0.0.3/MainEventBanner.xml');</script>
</div></div></div></div>

No se que propiedad darle a la div del menu para que quede por ensima de todo

mayid · #2 (**permalink**) 26/02/2010, 17:11

Tu flash tiene que tener el parametro background: transparent.

cristian_cena · #3 (**permalink**) 26/02/2010, 19:12

Si no me equivoco #header y #visual son hermanos, ambos hijos de #bodywrap (tabula tu código amigo

)

entonces, si quieres que #header se encuentre por encima de #visual:

#header {position:/*la que desees*/; /*controlas la posición con top-left-right-bottom*/ z-index:2;}
#visual {position:/*la que desees*/; /*top-left-right-bottom*/z-index:1;}
El numero mayor vendrá más adelante.

En el siguiente ejemplo #visual quedará por detrás de #header:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <style type="text/css">
#header {position:absolute; top:0; left:0; z-index:2; background-color:red; width:100px;}
#visual {position:absolute; top:50; left:0; z-index:1; background-color:blue; width:100px;}
        </style>
    </head>
<body>
<div id="Pagina">
        <div id="bodywrap">
                <div id="header">
                <p>esto se ve por arriba</p>
                </div>
                <div id="visual">
                    <p>esto se ve por debajo</p>
                </div>
            </div>
        </div>
</div>

Si copias y pegas el código verás que solo se visualizan 50px de #visual, es decir, su mitad inferior, siendo tapado por #header.

Espero te sirva, saludos!

cybernatico · #4 (**permalink**) 27/02/2010, 15:21

Lo único que tienes que hacer es darle la propiedad {position:absolute;} al div que quieras y ya.