HTML y CSS

Entendiendo el funcionamiento de “z-index” en CSS

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