Pb affichage bulles quand le navigateur n'est pas ouvert en grand

Bonjour,
après avoir sollicité et trouvé des conseils au sujet de la page type que je suis en train de mettre en place pour mon site dans la rubrique adequate , je cherche de l'aide concernant un problème qui me chagrine
sur cette page il y a des bulles d'info qui s'affichent au passage de la souris sur les onglets de mon en-tête.

Ces bulles se superposent au contenu "fixe".
Je les ai positionnées en absolute à 50% de la fenêtre puis je les décale vers la gauche ou la droite suivant l'onglet dont il s'agit à l'aide de margin.
La largeur nominale de ma page étant de 1000px, tout marche nickel sur les écrans >=1024px si le navigateur est en plein écran.
Mais si ce n'est pas le cas, patatrac ! les bulles ne sont plus en face des onglets correspondants !
Je limite la casse en n'affichant pas ces bulles (qui ne sont pas obligatoirement nécessaires) sur les résolution <1024px.

Je suis novice en terme de positionnement de div, j'ai beau lire et relire tutoriels&co, je ne vois pas comment faire... Est ce que quelqu'un a une solution ?

(j'ai bien trouvé un script JS qui récupère la largeur du navigateur mais c'est un peu lourd et puis si la personne change de taille d'affichage sans recharger la page, le problème réapparait)

Bonjour,

Apprendre à utiliser le positionnement absolu correctement serait un plus.

Pour rappel, un élément positionné en absolu auquel on donne des coordonnées (top, left, right, bottom) se placera en fonction de son plus proche ancêtre positionné. En dernier recours, ce référent sera la zone de visualisation du navigateur (viewport).

Donc, tu as plutôt intérêt à positionner tes éléments par rapport à un conteneur de largeur fixe: div#entete ou div#bandeau, par exemple. Ça implique 1) de placer tes éléments positionnés en absolu dans ce conteneur, et 2) de positionner ce conteneur en relatif, par exemple.