en alguna ocasión ya había yo hecho algo así sin embargo mi mala memoria no me ayudaba, ya que cuando
dejas de usar las cosas por mucho tiempo y no me refiero a mi memoria jajaja, pues simplemente se te olvida
aun asi recuerdo que lo había hecho con hojas de estilo en cascada y efectivamente con solo colocar esta
propiedad al estilo de un objeto este simulará que flota position:fixed pero ¿porque? , los bloques en posición fixed no se mueven cuando el documento es desplazado,ahora muy bien ya flota,pero
puede ocurrir que los otros objetos se superpongan, lo que támbien es conocido como capas, bueno pues
para eso sirve la propiedad z-index para definir que objetos pueden ir enfrente de otros objetos, es decir el
orden de los elementos en el eje z, esta propiedad solo funciona cuando se indica el posicionamiento absolute
y fixed para mayor información sobre los tipos de posicionamiento aquí dejo una liga posicionamiento con css y para la propiedad z-index y pues como era de esperar dejo el código de ejemplo.
<head>
<title>http://lafabricadesoftware.blogspot.com</title>
<style>
.flotante
{position:fixed;
z-index:100;
/*Aqui tenemos arriba las dos principales propiedades el z-index
100 indica que el objeto se va a sobreponer encima de todos los objetos*/
width:100px;
background:yellow;
border:1px solid green;
}
.capa
{
background-color:blue;
background:pink;
border:1px solid green;
}
</style>
</head>
<body>
<div class="flotante">
Este es el ejemplo de un menu que flota como ves es mas sencillo de lo que te imaginas
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="capa"><h3>Seccion de en medio</h3></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="capa"><h3>Ultima seccion de la pagina</h3></div>
</body>
GRACIAS!!!
ResponderEliminarTal cual (con algunos ajustes, y no tengo ni idea de programar) me ha servido para hacer mi menú.
www.queflash.es
GENIAL!!!
Solo una preguntita: ¿que tengo que hacer para que me quede a la derecha en lugar de a la izquierda?
Que bueno que te sirvio intenta agregarle la siguiente instruccion a la clase right: 0;
ResponderEliminarMuchisimas gracias.
ResponderEliminarFunciona perfectamente, aunque al final lo voy a dejar a la izquierda.
GRACIAS MIL!!!
muchas gracias!! me quitaste un dolor de cabeza, he conseguido mi menú flotante de una forma sencilla y no con locuras de códigos que salen por ahí.
ResponderEliminarsaludos
De nada, que bueno que te sirvio. conocimiento que no se comparte no sirve de nada :)
EliminarHola!! esta re bueno!! te consulto, como hacer para que se adapte a todos los formatos (celu, tablet)??
ResponderEliminarsaludos!