CSS / JavaScript - contenu en dehors d'un élément avec overflow:hidden

Question

J'ai un élément div conteneur qui a overflow:hidden sur elle. Malheureusement, cette propriété est requise en raison de la façon dont le site est conçu.

À l'intérieur de cette division se trouve tout le contenu du site, y compris quelques infobulles. Ces infobulles sont affichées avec jQuery lorsque vous passez la souris sur un lien ou autre.

Le problème est que certaines de ces infobulles s'afficheront partiellement cachées à cause du problème de débordement ci-dessus, car elles sont positionnées en dehors de la div du conteneur...

Existe-t-il un moyen de pouvoir afficher un élément spécifique à l'intérieur de ce conteneur, même s'il se trouve en dehors de ses limites ? Peut-être une solution en javascript ?

le html ressemble à ceci :

<div style="overflow:hidden; position:relative;">

  the main content

  <div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>

</div>

Answer 1

Essayez ceci :

<div style="position:relative;">    
  <div style="overflow:hidden; position: relative; width: {any}; height: {any};">the main content<div>    
  <div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>    
</div>

il suffit de placer votre contenu principal dans une autre div à l'intérieur de la div principale et de fournir des css pour cacher le contenu si elle déborde ...

Answer 2

Les feuilles de style en cascade fonctionnent comme une boîte, et il arrive parfois que des éléments " sortent ". Réglage de overflow: hidden sur l'élément principal masque les contenus qui sortent de cette boîte.

Considérez ce qui suit :

HTML

<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>

<p>This content is outside of the box.</p>

CSS

.box {
border: 1px solid #333333;
width: 200px;
height: 100px;
overflow: hidden;
}`

Cela donne les résultats suivants :

Notez que le reste des textes qui débordent sont cachés.

Answer 3

Si overflow:hidden doit contenir des flotteurs, il existe d'autres moyens de ne pas couper les infobulles. regardez pour clearfix:after