La div posición fija no se queda contenida en wrapping div, ¿superpone toda la pantalla?

Intento hacer que un div de posición fijo permanezca dentro de un div externo. Quiero que el ancho del div de posición fija sea del 100%. Sin embargo, cuando configuro el ancho al 100%, el div de posición fija cubre toda la pantalla y se superpone a la barra de desplazamiento en Firefox / IE8, etc. Aquí hay una muestra de lo que estoy hablando:

header
Contents here
Contents here
Contents here
Contents here
Contents here

Como puede ver, el div externo tiene un ancho de 380 píxeles … por lo tanto, no creo que sea posible que el div de posición fija se extienda fuera de este límite, pero lo hace.

¿Qué estoy haciendo mal?

¡Gracias!

Un elemento con posición fija se coloca con relación a la ventana gráfica. Los elementos posicionados fijos se eliminan del flujo normal. El documento y otros elementos se comportan como si el elemento posicionado fijo no existiera.

Aunque declares la position:fixed; , no especifica un valor para las propiedades top e left . El valor predeterminado para ambas propiedades es auto , lo que le permite al navegador calcular las posiciones de borde superior e izquierdo. Las posiciones de borde calculadas resultan ser las posiciones superior e izquierda del elemento en el flujo normal, por lo que se mueve cuando se establece un margen.

Fixed es siempre relativo a la ventana primaria, nunca es un elemento. Una vez que la posición se establece en fija, se saca del flujo de documentos.

http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning

El posicionamiento fijo es una subcategoría del posicionamiento absoluto. La única diferencia es que para un cuadro posicionado fijo, el bloque contenedor lo establece la ventana gráfica.

El navegador alineará el div fijo lo mejor que pueda al div que lo contiene de manera predeterminada.

Mi solución es ponerlo dentro de un div relativo que flota a la derecha. Esto le dará su punto de partida y el div fijo se flotará hacia la derecha.

Toda la posición: fija hará aquí es hacer

  

Sé que esta publicación es antigua, pero espero que ayude a alguien. Funciona en IE7 + y Firefox seguro.

Es exactamente su pregunta que me ayudó a encontrar una solución que funcionó para mí. Tuve que crear el “Santo Grial” (que es una columna fija a la izquierda y a la derecha y una columna de fluido en el centro) desde cero, pero necesitaba divisiones fijas dentro de cada una de las columnas relativas flotantes.

Si bien puede no ser necesariamente semánticamente correcto (bueno, tampoco lo son los divs fijos …) realmente funciona precisamente como se necesita e incluso obedece al cambio de tamaño de la columna central del “Santo Grial”.

A continuación hay una copia del CSS exacto que utilicé:

 #fixedcenterarea { width:(100%-210px); /*Right column of 200 minus a margin gap of 10; works in IE too*/ height:70px; position:fixed; left:200px; /*obey the left column of 200*/ right:210px; /*trim off 210px from the right of the viewport (200 column plus 10 margin*/ overflow:hidden; margin-left:10px; /*adds a gap from the left column*/ } 

También puede agregar top:50px; para golpear verticalmente.

El único inconveniente de esto está en el cambio de tamaño de la ventana. Todo está bien hasta que la ventana esté por debajo del tamaño mínimo (si tiene un juego).

Como esto usa un porcentaje del contenedor, continuará siguiéndolo aunque el view-port haya dejado de reducirse.

Y, si tiene curiosidad, aquí está cómo crear el Santo Grial: http://www.alistapart.com/articles/holygrail/

Las posiciones fija, absoluta y estática no son relativas al padre. Entonces, si cambias algo sobre ellos, se cambian a través de su base (por ejemplo, arriba, esquina izquierda de la página para absoluta)

Piensa en otro método de colocación.

Esta publicación es muy antigua, pero otros pueden beneficiarse de esta respuesta. En los navegadores modernos puede usar transform: translate3d(0,0,0); en el .parent para hacer que la posición fija se comporte como absoluta:

 

Sobre esa estructura puedes usar el siguiente CSS:

 .parent { position: relative; transform: translate3d(0,0,0); } .child { position: fixed; } 

Lo siguiente hará que el .child comporte como si fuera una position: absolute; . Esto es muy útil cuando necesita usar transformaciones con el padre que tiene overflow: hidden; . Alguien tuvo un buen ejemplo de este caso aquí .