Orden de pintura CSS

 

 

 

Por lo general, cuando veo términos como “orden de pintura” o “contexto de apilamiento”, mi cerebro comienza a apagarse y mis ojos pasan desapercibidos. No es que mi cerebro normalmente no se apague la mayoría de las veces, pero ese es otro tema para otro momento.

Martin Robinson, de Igalia, aborda estos conceptos utilizando un ejemplo que es bastante fácil de asimilar, incluso para mí. Comienza con dos cuadros que se superponen con márgenes negativos.

div1/divdiv2/div

Luego presenta una tercera caja que es hija de la caja verde. El cuadro verde recibe un z-indexvalor de -1. Como era de esperar, los cuadros verde y amarillo se apilan debajo del cuadro azul.

div0/divdiv-1 div-1/div/div

Aquí es donde mi cerebro empezó a derretirse. Si el valor z-indexdel cuadro verde permanece igual en -1 pero le damos a su hijo un valor enorme, digamos 1000, las cosas se ven… exactamente igual.

 

div0/divdiv-1 div1000/div/div

Estoy seguro de que muchos de ustedes ya pueden adivinar (o simplemente saber claramente) por qué el cuadro azul permanece en la parte superior, aunque cambiar el cuadro amarillo z-indeximplica que debería estar en la parte superior, pero yo seguro que no lo hice. Martin encontró la respuesta técnica en la especificación CSS2 oculta en lo más profundo del Apéndice E , que gentilmente vinculó; de lo contrario, estoy seguro de que nunca la habría encontrado.

Aprendemos del Apéndice E que un contexto de apilamiento es una colección de elementos de página pintados atómicamente. ¿Qué quiere decir esto? En pocas palabras, significa que las cosas dentro de un contexto de apilamiento se pintan juntas, como una unidad, y que los elementos fuera del contenido de apilamiento nunca se pintarán entre ellos. Tener un activo z-indexes una de las situaciones en CSS que desencadena la creación de un contexto de apilamiento. ¿Hay alguna manera de que podamos ajustar nuestro ejemplo anterior para que el tercer elemento pertenezca al mismo contexto de apilamiento que los dos primeros elementos? La respuesta es que debemos eliminarlo del contexto de apilamiento creado por el segundo elemento.

Así que sí. Siempre que el cuadro amarillo sea hijo del cuadro verde, los dos forman un contexto de apilamiento del que el cuadro azul no forma parte. Obtener el amarillo por encima del azul requiere eliminarlo del contexto de apilamiento del verde. Prodotti top

Ese es el quid de la publicación de Martin, pero va aún más allá y vale la pena ir allí. Si lo hace, verá cómo el orden de apilamiento conduce a algunos trucos CSS auténticos.

No es la primera vez que vinculamos pruebas de que z-index no hay igualdad de condiciones, así que intentaré memorizar esto la próxima (e inevitable) vez que luche con elementos de apilamiento.

Enlace directo →






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
  2. Cambiar el tamaño de los valores en pasos en CSS
  3. ¿Qué hace “revertir” en CSS?
  4. CSS4 es una mala idea

Orden de pintura CSS

Orden de pintura CSS

Por lo general, cuando veo términos como “orden de pintura” o “contexto de apilamiento”, mi cerebro comienza a apagarse y mis ojos pasan desapercibido

programar

es

https://pseint.es/static/images/programar-orden-de-pintura-css-1604-0.jpg

2024-06-13

 

Orden de pintura CSS
Orden de pintura CSS

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences