Problèmes d’affichage des éléments en mode absolu avec Internet Explorer

Les vieilles versions de Internet Explorer (IE 6 et IE 7 généralement, je ne teste plus en dessous car le trafic n’en vaut pas la peine) nous réservent toujours des surprises quand on développe une page web, avec tout leurs bugs CSS, et il arrive souvent d’avoir des problèmes d’éléments qui sont affichés en-dessous d’un autre élément quand ceux-ci sont en mode de positionnement absolu en CSS (position: absolute;), malgré les indications z-index, le cas le plus fréquent étant un menu dynamique défilant en en-tête de page qui se retrouve caché par d’autres images ou vidéos sur la page lorsqu’il est activé alors qu’il devrait évidemment être au-dessus.

On a beau tenter de régler le tout avec un z-index supérieur pour le placer au-dessus de ceux-ci, la raison d’être de cet attribut CSS, ce qui marche avec les navigateurs modernes standards comme Firefox ou Chrome, mais il n’y a rien à faire avec Explorer.

Ces vieux bugs frustrants font vraiment tout le charme de ce navigateur web populaire. Apparemment, ces vieilles versions d’Internet Explorer calculent le z-index différemment des autres navigateurs et accordent une valeur interne aux éléments en mode de positionnement absolu selon leur ordre d’apparition dans le code HTML de la page, au lieu de considérer la valeur indiquée par le code CSS.

Dans le cas des vidéos, comme ceux qui sont souvent intégrées dans la page à partir du code embed de Youtube, par exemple, il suffit souvent d’ajouter l’attribut wmode="opaque" dans la balise <embed> (pas la balise <object>). Oui ça ne semble pas être très naturel, mais ça marche. Ex:

Code typique d’un vidéo youtube:

Avec le nouvel attribut, vers la fin:

Si ce code ne fonctionne toujours pas, vous pouvez toujours essayez wmode="transparent"

Une autre solution tout aussi bizarre est d’ajouter un z-index très élevé (1000) à la balise parente, normalement en mode de positionnement relative (position: relative;) et qui ne devrait pas requérir cet attribut, de l’objet en positionnement absolu. Si ça ne marche toujours pas, essayez de l’ajouter à la balise parente de la balise parente de l’objet absolu.

Note 2011-06-26: Maintenant que Youtube utilise les iframes pour l’intégration de ses vidéos sur des pages externes, il faut ajouter le code wmode dans l’url, comme suit:

ou

Si l’url a déjà des paramètres, il faut plutôt l’ajouter avec le symbole &.