Aparecer y Desaparecer div con Css y jQuery

blogphpd · #1 (**permalink**) 05/06/2012, 16:58

Voy al grano de una vez tengo este script:

Código:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ayuda TodoExpertos.com - @JuanGarciaR</title>
<script src="http://bphpd.comlu.com/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#mostrar').click(function(){
$('#capa').toggle('slow').css('display','block');
});
});
</script>
<style type="text/css">
#capa{
display: none;
}
ul,li{
list-style: none;
}
</style>
</head>
<body>
<a href="#" id="mostrar">Desplegar Men ú</a>
<div align="justify" id="capa">
<ul>
<li>
<a href="#">SubMenú 1</a>
</li>
<li>
<a href="#">SubMenú 2</a>
</li>
<li>
<a href="#">SubMenú 3</a>
</li>
</ul>
</div>
<br />
Hola mundo ooooooooooooooooooooooooo
</body>
</html>

Cómo hago para que el div capa cuando aparezca no empuje el escrito 'Hola mundo...' hacia abajo, sino que pase por encima.

Por cierto soy nuevo pero muy bueno en PHP espérenme allí. Lo mío es programación mas no diseño así que por eso hago esta pregunta acá sobre Css, una ayudita por favor!.

ipraetoriux · #2 (**permalink**) 05/06/2012, 17:10

que la capa este por encima del Hola Mundo?...probastes usar z-index en el CSS?...segurametne deberas acomodar los position tambien..

blogphpd · #3 (**permalink**) 05/06/2012, 19:18

ya lo he solucionado he puesto position: absolute;

versión final del código:

Código:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ayuda TodoExpertos.com - @JuanGarciaR</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#mostrar').click(function(){
$('#capa').toggle('slow').css('display','block');
});
});
</script>
<style type="text/css">
#capa{
position:absolute;
display: none;
background: #330000;
}
ul,li{
list-style: none;
}
</style>
</head>
<body>
<a href="#" id="mostrar">Desplegar Men ú</a>
<div align="justify" id="capa">
<ul>
<li>
<a href="#">SubMenú 1</a>
</li>
<li>
<a href="#">SubMenú 2</a>
</li>
<li>
<a href="#">SubMenú 3</a>
</li>
</ul>
</div>
<br />
Holaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</body>
</html>

gracias