élément Afficher l'intérieur d'un DIV avec trop-plein-y au-dessus de tous les autres

Question

je l'info-bulle suivante:

#left_div { 
 
    max-height:170px; 
 
    overflow-x:hidden; 
 
    overflow-y:scroll; 
 
} 
 
a.tditems_tooltip { 
 
    position: relative; 
 
    display: inline-block; 
 
    text-decoration:none; 
 
} 
 
a.tditems_tooltip span { 
 
    position: absolute; 
 
    max-width:400px; 
 
    color:#FFFFFF; 
 
    line-height:16px; 
 
    padding:0; 
 
    background:url('/layouts/background.gif'); 
 
    border: 1px solid #CFB57C; 
 
    text-align: center; 
 
    display: none; 
 
    text-decoration:none; 
 
    font-size: 12px; 
 
    box-shadow: 0 1px 4px #AAAAAA; 
 
} 
 
a.tditems_tooltip span:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0%; 
 
    margin-left: 150px; 
 
    max-width:800px; 
 
    text-decoration:none; 
 
} 
 
a:hover.tditems_tooltip span { 
 
    display: inline-block; 
 
    bottom: 100%; 
 
    left: 0%; 
 
    margin-left: -3px; 
 
    z-index: 1000; 
 
    text-decoration:none; 
 
}

<table border="0" cellspacing="1" cellpadding="1" width="400" height="300"> 
 
    <tr> 
 
    <td width="50%"> 
 
     <div id="left_div"> 
 
     </br> 
 
     </br> 
 
     </br> 
 
     </br> 
 
     <a class="tditems_tooltip"> 
 
      <font color="red">TRIGGER</font> 
 
      <span> 
 
      <table border="0" cellspacing="0" cellpadding="1" width="300"> 
 
       <tr bgcolor="green"> 
 
        <td>CONTENT OF TOOLTIP</td> 
 
       </tr> 
 
      </table> 
 
      </span> 
 
     </a> 
 
     </br> 
 
     </br> 
 
     </br> 
 
     </br> 
 
     </br> 
 
     </br> 
 
     </br> 
 
     </br> 
 
     </div> 
 
    </td> 
 
    <td width="50%">INSIGNIFICANT CONTENT</td> 
 
    </tr> 
 
</table>

Et jusqu'à présent, il travaille presque parfaitement à ce que je veux. .. Sauf pour une chose: l'info-bulle (span) n'apparaît pas au-dessus de tous les autres éléments de la page, mais montre derrière elle. Commander l'extrait ci-dessus.

REMARQUE: Lorsque je retire de la CSS le overflow-x et overflow-y du td il montre le chemin prévu, mais je dois encore préciser un max-height que td ...

Des idées?

Answer 1

L'ajout de position: fixed; à un élément enfant le supprimera du flux des parents de cet élément dans le DOM, de sorte que l'élément enfant ignorera les propriétés overflow des éléments parents. L'affectation d'un positionnement fixe à la table qui contient l'info-bulle semble forcer cet élément en dehors des propriétés de débordement de ses parents, mais se positionner ensuite différemment dans l'élément de plage positionné de manière absolue, donc j'ai appliqué transform: translateY(-100%); pour le faire fonctionner avec votre Exemple. Vous devrez peut-être retravailler la disposition de ces éléments pour que cela fonctionne comme vous le feriez. (BTW, les styles que j'ai ajouté sont sous a.tditems_tooltip span > table)

#left_div { 
 
    max-height:170px; 
 
    overflow-x:hidden; 
 
    overflow-y:scroll; 
 
} 
 
a.tditems_tooltip { 
 
    position: relative; 
 
    display: inline-block; 
 
    text-decoration:none; 
 
} 
 
a.tditems_tooltip span { 
 
    position: absolute; 
 
    max-width:400px; 
 
    color:#FFFFFF; 
 
    line-height:16px; 
 
    padding:0; 
 
    background:url('/layouts/background.gif'); 
 
    border: 1px solid #CFB57C; 
 
    text-align: center; 
 
    display: none; 
 
    text-decoration:none; 
 
    font-size: 12px; 
 
    box-shadow: 0 1px 4px #AAAAAA; 
 
} 
 
a.tditems_tooltip span:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0%; 
 
    margin-left: 150px; 
 
    max-width:800px; 
 
    text-decoration:none; 
 
} 
 
a:hover.tditems_tooltip span { 
 
    display: inline-block; 
 
    bottom: 100%; 
 
    left: 0%; 
 
    margin-left: -3px; 
 
    z-index: 1000; 
 
    text-decoration:none; 
 
} 
 
a.tditems_tooltip span > table { 
 
    position: fixed; 
 
    transform: translateY(-100%); 
 
}

<table border="0" cellspacing="1" cellpadding="1" width="400" height="300"> 
 
    <tr> 
 
    <td width="50%"> 
 
     <div id="left_div"> 
 
     </br> 
 
     </br> 
 
     </br> 
 
     </br> 
 
     <a class="tditems_tooltip"> 
 
      <font color="red">TRIGGER</font> 
 
      <span> 
 
      <table border="0" cellspacing="0" cellpadding="1" width="300"> 
 
       <tr bgcolor="green"> 
 
        <td>CONTENT OF TOOLTIP</td> 
 
       </tr> 
 
      </table> 
 
      </span> 
 
     </a> 
 
     </br> 
 
     </br> 
 
     </br> 
 
     </br> 
 
     </br> 
 
     </br> 
 
     </br> 
 
     </br> 
 
     </div> 
 
    </td> 
 
    <td width="50%">INSIGNIFICANT CONTENT</td> 
 
    </tr> 
 
</table>