Entendiendo el funcionamiento de “z-index” en CSS

Posted on Diciembre 18, 2007, under General.

Interesante artículo, con su página de demostración, que explica qué es y como funciona la propiedad "z-index" en el CSS. Según el artículo, estas son las reglas de oro aplicables a esta propiedad:

  • A box is at the same stack level as its parent’s unless it is given a different stack level through the ‘z-index’ property.
  • z-index applies only to objects that have the position property set to relative, fixed or absolute.
  • Assigning an opacity value less than 1 to a positioned element implicitly creates a stacking context, just like adding a z-index value.

For a positioned box, the z-index property specifies:

  1. The stack level of the box in the current stacking context.
  2. Whether the box establishes a local stacking context.

If there is no z-index specified, elements are stacked in the following order (from back to front):

  1. boxes in the normal flow, according to the sequence in the source code
  2. floating boxes
  3. positioned boxes, according to the sequence in the source code

Artículo completo: http://tjkdesign.com/
Demo: Understanding z-index

Leave a Comment