CSS problème de position de infobulle

Question

Actuellement, je suis en utilisant CSS ci-dessous pour afficher une boîte de vol stationnaire:

.box { 
    width: 500px; 
    padding: 3px; 
    background: #404040; 
    color: #fff; 
    font: normal 12px Arial, Sans-serif; 
    position: absolute; 
} 

la fonction javascript:

function showBox(i,j){ 
       if(i==1){ 
        document.getElementById("box"+j).style.display='block'; 
       } else if(i==2) { 
        document.getElementById("box"+j).style.display='none'; 
       } 
      } 

le code html:

<div style="height:175px;overflow:auto;"> 
      <table> 
       <tr> 
        <td> 
         <table> 
          <tr> 
           <td> 
            <p onmouseover="showBox(1,1);" onmouseout="showBox(2,1);" id="hover1">Hover Me 1</p> 
            <div id="box1" class="box">I'm hover box 1.</div> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 

       <tr> 
        <td> 
         <table> 
          <tr> 
           <td> 
            <p onmouseover="showBox(1,2);" onmouseout="showBox(2,2);" id="hover2">Hover Me 2</p> 
            <div id="box2" class="box">I'm hover box 2.</div> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 

       <tr> 
        <td> 
         <table> 
          <tr> 
           <td> 
            <p onmouseover="showBox(1,3);" onmouseout="showBox(2,3);" id="hover3">Hover Me 3</p> 
            <div id="box3" class="box">I'm hover box 3.</div> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 

       <tr> 
        <td> 
         <table> 
          <tr> 
           <td> 
            <p onmouseover="showBox(1,4);" onmouseout="showBox(2,4);" id="hover4">Hover Me 4 </p> 
            <div id="box4" class="box">I'm hover box 4.</div> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 

       <tr> 
        <td> 
         <table> 
          <tr> 
           <td> 
            <p onmouseover="showBox(1,5);" onmouseout="showBox(2,5);" id="hover5">Hover Me 5</p> 
            <div id="box5" class="box">I'm hover box 5.</div> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 

       <tr> 
        <td> 
         <table> 
          <tr> 
           <td> 
            <p onmouseover="showBox(1,6);" onmouseout="showBox(2,6);" id="hover6">Hover Me 6</p> 
            <div id="box6" class="box">I'm hover box 6.</div> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 

       <tr> 
        <td> 
         <table> 
          <tr> 
           <td> 
            <p onmouseover="showBox(1,7);" onmouseout="showBox(2,7);" id="hover7">Hover Me 7</p> 
            <div id="box7" class="box">I'm hover box 7.</div> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
      </table> 
     </div> 

Si vous exécutez ceci, vous verrez qu'une case de survol est apparue lorsque vous passez la souris sur un texte "Hover ME X". Cela fonctionne bien jusqu'à ce que vous n'avez pas fait défiler vers le bas dans div. Lorsque vous faites défiler vers le bas dans div la zone de pointage s'affiche dans la mauvaise position. Comment puis-je surmonter ce problème?

Answer 1

Ici le problème est que jusqu'à ce que vous faites défiler la page, le div sera positionné dans la bonne position, et lorsque vous faites défiler vers le bas, vous devez garder à l'esprit que votre page a augmenté de la taille de l'écran par défaut. vous devez considérer les faits défiler vers le haut et défilement gauche, alors que vous avez la div positionné correctement. Essayez de définir des expressions dans le CSS ou écrivez manuellement votre propre fonction pour positionner la div. J'espère que cela vous aide.

Answer 2

Le problème est votre positionnement de la boîte absolument:

position: absolute; 

Essayez plutôt le positionnement relatif ou fixe.

position:fixed; 

Answer 3

Si vous utilisez

position: absolute; 

Et vous utilisez des marges négatives et positives, vous serez en mesure de placer la div où vous voulez (en éliminant la nécessité d'utiliser quoi que ce soit autre que la position: absolute), les marges seront juste relatives à l'endroit où le div est placé dans le code. Un autre bug avec le codage est que la div apparaît (au moins dans mon navigateur {} chrome) avant même au-dessus du placez le curseur texte qui l'active. Une solution très rapide pour cela, pour assurer le fonctionnement correct de tous (ou la plupart) des navigateurs, est d'ajouter le style suivant le style CSS « ​​boîte »:

display: none; 

Cela permet de masquer la DIV par défaut, dans tourner, l'empêchant d'apparaître sur le chargement de la page. Ensuite, lorsque vous survolez le texte, le "display: block" dans le JavaScript l'écrase, il n'y aura donc pas de problèmes.

Le résultat final de mon style css "boîte" est:

padding: 3px; margin-left:-10px; margin-top:15px; color: #fff; font: normal 12px Arial, Sans-serif; position:absolute; display:none; padding: 10px 7px 10px 7px; border:#333333 1px solid; border-radius:3px; width:224px;