Positionnement absolu d'un bloc selon le positionnement du bloc conteneur

Note : Le positionnement absolu d'un élément à l'intérieur d'un bloc en positionnement relatif pose problème avec IE Windows (on observe un décalage horizontal) si le bloc conteneur n'est pas doté de layout.

Dans cet exemple, ces problèmes sont corrigés par l'utilisation de la propriété non standard zoom.

Références : Le concept de HasLayout dans IE Windows et plus particulièrement : Positionnement incorrect ou disparition des éléments en positionnement absolu, selon le layout (Laurent Denis).

Bloc conteneur global en positionnement statique

position: static;
/* "static" est la valeur par défaut. On peut aussi, plus simplement,
   ne pas du tout utiliser la propriété "position" pour ce bloc       */

Cas n°1 : bloc conteneur
en positionnement
statique (standard)

padding-right: 13em;

[Cas n°1]

position: absolute;
top: 0;
right: 0;

Cas n°2 : bloc conteneur
en positionnement
relatif

position: relative;
zoom: 1;
padding-right: 13em;

[Cas n°2]

position: absolute;
top: 0;
right: 0;

Bloc conteneur global en positionnement relatif

position: relative;
zoom: 1;

Cas n°1 : bloc conteneur
en positionnement
statique (standard)

padding-right: 13em;

[Cas n°1]

position: absolute;
top: 0;
right: 0;

Cas n°2 : bloc conteneur
en positionnement
relatif

position: relative;
zoom: 1;
padding-right: 13em;

[Cas n°2]

position: absolute;
top: 0;
right: 0;

Bloc conteneur global
en positionnement absolu

position: absolute;
width: 40em;

Cas n°1 : bloc conteneur
en positionnement
statique (standard)

padding-right: 13em;

[Cas n°1]

position: absolute;
top: 0;
right: 0;

Cas n°2 : bloc conteneur
en positionnement
relatif

position: relative;
zoom: 1;
padding-right: 13em;

[Cas n°2]

position: absolute;
top: 0;
right: 0;