Table-cell et position:absolute ne marchent pas ensemble

Bonjour,

J'utilise dans ma feuille CSS une mise en page avec 3 colonnes avec table-layout:fixed; et display:table-cell; (comme indiqué dans le livre CSS avancées vers HTML5 et CSS3). Tout fonctionne très bien.

Toutefois, je souhaite mettre un gif animé au-dessus d'une image de base. Dans le div de la colonne qui contient l'image, j'ai mis un position:relative; et ensuite j'utilise un position:absolute; pour l'image gif.

Le gif s'affiche bien au-dessus de l'image de base, mais il utilise la table entière comme point de référence au lieu d'utiliser la colonne définie comme parent et relative. Ce qui fait que je ne peux pas positionner mon gif comme je le veux.

Y a-t-il incompatibilité entre table-layout et position ? ou ai-je raté quelque chose ?

Merci d'avance.

Bonjour,

Effectivement, les éléments de table ne peuvent pas être positionnés.

Une manière de contourner cette limitation serait d'insérer une div à l'intérieur de ton <td> ou de ton élément en display table-cell (ou autres) qui lui pourra être positionné (dans ton cas en relatif pour servir de référence à ton image en absolute)

tibibou a écrit :

Le gif s'affiche bien au-dessus de l'image de base, mais il utilise la table entière comme point de référence au lieu d'utiliser la colonne définie comme parent et relative. Ce qui fait que je ne peux pas positionner mon gif comme je le veux.

Y a-t-il incompatibilité entre table-layout et position ? ou ai-je raté quelque chose ?

Bonjour,

Effectivement, ce comportement spécifique est décrit dans le livre à la fin de la page 131

Bonne journée.

Merci.

Effectivement, c'est bien écrit et j'ai dû passer trop rapidement aux éléments positifs sans m'attarder sur ce problème. Je vais essayer d'ajouter un div neutre.