posicionar - posicion relativa css

CSS: posición: fijo dentro de la posición: fijo

Question

De acuerdo, noté algo, pero no pude encontrarlo en las especificaciones de CSS. Diseñar un elemento con position: fixed lo posicionará de forma absoluta, con respecto a la ventana del navegador. ¿Qué sucede si coloca un elemento de posición fija dentro de otro? Ejemplo de CSS a lo largo de las líneas de:

.fixed {
    position: fixed;
    width: 100px;
    height: 100px;
    background: red;
}

#parent { right 100px;  padding: 40px; }

.fixed .fixed { background: blue; }

Y HTML:

<div id="parent" class="fixed"> <div class="fixed"> </div> </div>

Hasta donde puedo decir, el elemento está fijo-colocado con respecto a su padre más cercano que también está fijo-posicionado. ¿Es esto osbervable en todos los navegadores? también, ¿es un error o un comportamiento intencional?

Hasta ahora no he encontrado nada sobre este tema en Internet, solo ''posición fija hace que se adhiera a la página''.

Answer 1

La fijación y el posicionamiento son dos cosas separadas. Están posicionados de la misma manera que los elementos absolutamente posicionados: relativos a su bloque contenedor . Pero a diferencia de los elementos absolutamente posicionados, permanecen fijos en esa posición con respecto a la ventana gráfica (es decir, no se mueven al desplazarse):

http://www.w3.org/TR/CSS2/visuren.html#propdef-position

La posición de la caja se calcula de acuerdo con el modelo ''absoluto'', pero además, la caja se fija con respecto a alguna referencia.

Posicionamiento

La definición de bloque contenedor dice:

Si el elemento tiene ''posición: fija'', el bloque contenedor lo establece la ventana gráfica en el caso de medios continuos (...)

y

Si el elemento tiene ''position: absolute'', el bloque contenedor lo establece el ancestro más cercano con una ''posición'' de ''absolute'', ''relative'' o ''fixed'' (...)

lo que sugiere que si bien su algoritmo de posicionamiento es el mismo (ambos están ubicados en relación con su bloque contenedor), el bloque contenedor para elementos fijos es siempre la ventana gráfica, en contraste con los elementos absolutamente posicionados, por lo que deben posicionarse en relación con eso y no a ningún elemento fijo o absolutamente fijo.

Y, de hecho, ese es realmente el caso. Por ejemplo, si agrega top: 20px a .fixed , ambos divs se colocarán a 20 píxeles de la parte superior de la ventana gráfica. El div fijo anidado no se ubica 20 píxeles hacia abajo desde la parte superior de su principal.

La razón por la que no está viendo eso en este caso es porque en realidad no está configurando ninguna de las propiedades izquierda / arriba / derecha / abajo, por lo que sus posiciones están determinadas por la posición que tendrían en el flujo (su " posición estática " "), que como decía mi primera cita, se hace de acuerdo con el modelo absoluto.

Answer 2

No creo que este sea realmente el intento. Las cosas con un posicionamiento fijo están todas posicionadas en relación con la ventana, si tiene un hijo fijo de otro fijo, ¿qué quiere que suceda? Puede duplicar fácilmente el comportamiento no solo colocando ambos elementos fijos por separado, o usando otra posición para alterar la posición del niño dentro del elemento fijo. :RE

Answer 3

No creo que haya nada más en esto, entonces, ¿qué dices que hay?

Genera un elemento absolutamente posicionado, ubicado en relación con la ventana del navegador. La posición del elemento se especifica con las propiedades "izquierda", "superior", "derecha" e "inferior"

Entonces, si te deshaces de ese "relleno: 40px"; obtendrás 2 elementos, 1 sobre otro.

Mismo efecto que si colocara ambos elementos absolutamente en la parte superior: 0 izquierda: 0 con el mismo padre (cuerpo).