CSS position:fixed (una ayudita para div flotante, please!!!)

[MiNick]

Hola a todos, soy nuevo en este foro y primero que nada quiero saludaros y daros las gracias porque aunque hasta el momento no me había dado de alta, sí que lo había consultado en numerosas ocasiones porque me parece que es un foro de gran ayuda y utilidad.
Espero yo también poder ayudar ahora que más o menos ya he aprendido con vuestra ayuda y mucha paciencia algo.

El caso es que he INTENTADO TODO para hacer que un div pueda "moverse" dentro de otro, poniendo al elemento "padre" la opción position:relative y al hijo la position:fixed.
Lo he intentado a través de CSS3 y en combinación con jquery.
He leído y tomado DECENAS de ejemplos de la web (muchos de ellos de esta), pero ninguno me ha servido de nada porque el "div flotante" SE SALE del div padre.
No hay forma humana de hacer que se quede en su sitio.
Y cuando creía que ya lo tenía, resulta que bajo la resolución a 800x600 y el div, que DEBE de moverse de ARRIBA A ABAJO SOLAMENTE, resulta que se mueve hacia los lados...

Si queréis puedo poner el código que estoy usando, pero es que NO funciona y el div "flotante" hace lo que le da la gana y siempre "se sale" del div padre.

Muchas gracias por vuestra ayuda desde ya. Un saludo ;)

[ArturoGallegos]

pues no es que queramos tu código pero sin el no hay ayuda.... es imposible saber que haces mal si no vemos lo que tienes hecho.

[C2am]

http://www.librosweb.es/css/capitulo...ento_fijo.html

El estándar CSS considera que el posicionamiento fijo es un caso particular del posicionamiento absoluto, ya que sólo se diferencian en el comportamiento de las cajas posicionadas.

Cuando una caja se posiciona de forma fija, la forma de obtener el origen de coordenadas para interpretar su desplazamiento es idéntica al posicionamiento absoluto. De hecho, si el usuario no mueve la página HTML en la ventana del navegador, no existe ninguna diferencia entre estos dos modelos de posicionamiento.

La principal característica de una caja posicionada de forma fija es que su posición es inamovible dentro de la ventana del navegador. El posicionamiento fijo hace que las cajas no modifiquen su posición ni aunque el usuario suba o baje la página en la ventana de su navegador.

Es decir, que es fijo con respecto a la pantalla y no con respecto a su contenedor.
Saludos

[MiNick]

Muchas gracias a ambos por vuestras respuestas. Pongo el código que Ag666 solicitó:

Esto de abajo es el css:
#hiddenMap es el div "padre" y la clase toolbar es del elemento hijo:

Código:

#hiddenMap {
width:320px;
margin: 0 0 30px 0;
position:relative;
}
.toolbar {
position: fixed;
z-index: 100;
margin-left:2px;
}

Ahora pongo el HTML:

Código HTML:

<div id="hiddenMap">
      <div class="toolbar">
            <div id="div_maps">
<img src="/webimages/fondos/loadingMap.gif"  width="100%" height="100%"/>
            </div>
      </div>
</div> 

Tengo también otro ejemplo con jquery pero viene haciendo EXACTAMENTE lo mismo: cuando bajo la resolución, se desplaza horizontalmente.
Es frustrante. Gracias de nuevo a ambos por vuestra ayuda.
Si se os ocurre algo más, por favor, decídmelo, que llevo ya 3 días completamente perdidos :(
Un saludo!!

[MiNick]

Se me olvidó preguntar otra cosilla:

¿Existe alguna forma de "engañar" al navegador para que piense que un div es el elemento body del documento? Es que según lo que he podido observar y el tutorial que amablemente me pasó C2am, el div flotante "tiende" a permanecer fijo en el sitio exacto en el que está, independientemente de lo que haga la página, de ahí que PAREZCA moverse hacia derecha o izquierda cuando la resolución es baja (digo lo de parezca porque en realidad lo que se mueve es la página, pero el div permanece inmóvil, algo que es un error ya que hace que se vaya de sus div contenedor y del visionado) No sé si me he explicado correctamente.

El caso es que si un div pudiese ser "emulado" como body, creo que no habría problema alguno.

Nuevamente gracias por vuestras respuestas y saludos cordiales!!

[MiNick]

Hola de nuevo, he encontrado un buen tutorial que sirve "perfectamente" para el ejemplo que busco, por si a alguien le puede interesar:

http://kitchen.net-perspective.com/open-source/scroll-follow/

Había probado algunos ejemplos con jquery, pero el problema estaba en la propiedad "speed", que por defecto es de 500 milisegundos.
Estableciendo a 0 ese valor, sigue de manera instanánea.
El problema ¡cómo no!, es con internet explorer, que si bien "cumple", lo hace a saltos, es decir, como si parpadeace y con un retardo visible.
En Chrome o safari mejora y el único que lo hace bien es (cómo no otra vez) el Firefox...

Como el cuadro que necesito que flote es un mapa sobre el que se puede "interactuar", ese mínimo retardo es una enorme molestia para el usuario...
Con lo sencillo que sería establecer la propiedad fixed y "ahorrarme problemas" (y una librería bastante "pesada"...)

Puedo poner mi ejemplo con jquery por si a alguien le interesa. Tengo unos cuantos, pero o bien se salen del div, o bien tienen el fallo que acabo de comentar.
Gracias y de nuevo, si os surge alguna idea, os estaría muy agradecido.
Un saludo!

[C2am]

Que bueno que hayas encontrado la solución.
Ahora solo una cosa, "flotar" en css tiene otro significado y se refiere a la propiedad float.
Lo tuyo es "posición fija".

En cuanto al efecto, la verdad que siempre lo he encontrado molesto, pero bue, eso depende de cada quién.

Saludos

[MiNick]

Gracias C2am por tus respuestas.
Y sí, tienes razón, es fijar (de fixed) NO flotar (de float), jeje ;)

Pero creo que más o menos se entendía lo que quería preguntar. Porque si buscas en internet div flotante la propiedad que se usa para hacerlos es "fixed". De todas formas, de verdad que agradezco tus respuestas y tu corrección.

Y ya puestos: he encontrado una forma mucho más "amena y ligera" de hacerla.
El problema era que en resoluciones pequeñas el scroll o fixed del div se iba para la izquierda o derecha, algo que NO debía de hacer jamás por lo absurdo y molesto que resultaba que se fuera del visionado.

Lo he logrado simplemente con js y CSS.
Se basa en CSS para ir hacia arriba o hacia abajo con la posición fixed, y, lo más importante, DETECTA cualquier movimiento del scroll horizontal para aumentar o disminuir su posición y así BLOQUEAR el scroll horizontal con js (no es un bloqueo evidentemente sino una "adecuación" que lo mantiene fijo).

Si a alguien le interesase el código, que lo diga y lo postearé.
Un saludo!