2012-02-20 16 views
15

A div con "position: fixed" está incrustado en un padre div. Cuando el padre rota o traduce, el niño div se mueve también."posición: fija" div no se fija cuando el padre rota o traduce

¿Es un error? Esperaba que el hijo div permaneciera fijo.

fragmento HTML:

<div id="mask"> 
    <div id="page"> 
    </div> 
</div> 

Ver una repro en: http://jsfiddle.net/PseKK/

Sé que puedo solucionarlo aplicando la transformación inversa para el niño div pero por razones de rendimiento en mi escenario real, Estoy buscando una solución que no implique extra-transformación.

¿Alguna idea de cómo superar?

+0

¿No puedes sacar el div interno? Si no, ¿por qué? –

+0

No puedo porque, en mi situación real, el padre div enmascara parte del div infantil. – viebel

+0

Puedes sacar la div interior de todos modos. Hazlo, luego juega con 'z-index' para colocar la máscara sobre la página. –

Respuesta

10

Este es un repost, la respuesta se encuentra en esta pregunta original

Positions fixed doesn't work when using -webkit-transform

Por desgracia, es un error, pero parece que hay una manera de conseguir alrededor de él.

+1

¡Muchas gracias! ¿Sabes cómo 'convertir la imagen transformada en div y usarla como fondo' como sugieren? – viebel

+1

Creo que lo que dicen es que en lugar de usar CSS para su div transformado, use una imagen y colóquela como fondo dentro de un div fijo, para que tenga una imagen colocada, en lugar de CSS para la forma de la transformación. [Desafortunadamente eso no es realmente una "solución", pero parece que no hay nada más que hacer.] – JimmyBanks

+0

¿Qué quieres decir con "parece que hay una forma de evitarlo"? ¿Por qué no puedes simplemente escribirlo como una respuesta si hay una manera, o publicar un comentario como respuesta? – vsync

Cuestiones relacionadas