Posición: elemento fijo dentro de una posición: padre relativo. ¿Qué navegador se procesa correctamente?

Question

Feb 18, 2015, 05:58 AM

Posición: elemento fijo dentro de una posición: padre relativo. ¿Qué navegador se procesa correctamente?

Estoy viendo una discrepancia en cómo se comportan los elementos de posición fija dentro de un padre relativamente posicionado. De acuerdo con los documentos que encuentro en línea, FireFox y Chrome deberían arreglar el elemento en la ventana gráfica y no el padre. Sin embargo, descubro que si no especifico un valor izquierdo / derecho en un elemento fijo, se comporta en una especie de mezcla entre estático Y fijo, en el sentido de que se fija verticalmente a la ventana gráfica, pero se mueve como si fuera Un elemento estático dentro del elemento padre. No puedo encontrar ninguna documentación oficial / respetada sobre estas condiciones. Básicamente, todos dicen algo como lo siguiente:

Posicionamiento fijo No deje espacio para el elemento. En su lugar, colóquelo en una posición específica en relación con la ventana gráfica de la pantalla y no lo mueva cuando se desplace. Al imprimir, colóquelo en esa posición fija en cada página.

Fuente

Safari, por otro lado, parece representarlo, ya que se describe donde está fijado exclusivamente a la ventana gráfica, sin importar si configuro un elemento padre como relativo sin ninguna propiedad superior / derecha / inferior / izquierda definida. Pruébelo en Safari si tiene la oportunidad haciendo clic en el div verde azulado que lo posiciona a -100 píxeles desde la izquierda. La barra amarilla permanecerá fija en la ventana gráfica:

http://jsfiddle.net/bbL8Lh4r/2/

Entonces, ¿qué navegador está haciendo esto correctamente? Todos mis navegadores han sido actualizados a la última versión. Al principio pensé que Safari era el correcto con solo leer los documentos, pero FireFox y Chrome comparten la misma vista diferente donde parece ser un híbrido entre estático y fijo.

HTML

<body>
    <aside>
        Blah
    </aside>

    <div class="container">
        <div class="nav">
            BLARGH
        </div>
    </div>
</body>

CSS

body,
aside,
.container,
.nav {
    margin:0;
    padding:0;
}

aside {
    background:red;
    width:30%;
    height:800px;
    float:left;
}

.container {
    position:relative;
    height:800px;
    width:70%;
    background:teal;
    float:right;
}

.container.stickied {
    left:-100px;
}

.container .nav {
    position:fixed;
    background:yellow;
    width:inherit;
}