javascript - CSS / JavaScript-overflow：hiddenを持つ要素の外側のコンテンツ

Question

コンテナのdiv要素がありoverflow:hiddenます。残念ながら、このプロパティは、サイトの作成方法のために必要です。

このdiv内には、いくつかのツールチップを含むすべてのサイトコンテンツがあります。これらのツールチップは、リンクなどにマウスを合わせるとjQueryで表示されます。

問題は、これらのツールチップの一部が、コンテナdivの外側に配置されているため、上記のオーバーフローのために部分的に非表示になることです。

境界の外にある場合でも、このコンテナの内側から特定の要素を表示できるようにする方法はありますか？多分javascriptソリューション？

htmlは次のようになります。

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

  the main content

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

</div>

Answer 1

これを試して：

<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>

メインコンテンツをメインdiv内の別のdivに配置し、提供されたcssを指定して、オーバーフローした場合にコンテンツを非表示にします...

Answer 2

CSSはボックスのように機能し、要素が「流出」する場合があります。メイン要素に設定overflow: hiddenすると、このボックスから流出するコンテンツが非表示になります。

次のことを考慮してください。

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;
} `

これにより、次のように出力されます。

オーバーフローする残りのテキストは非表示になっていることに注意してください。

Answer 3

overlay：hiddenにフロートを含める場合は、ツールチップが途切れないようにする他の方法があります。敵のclearfixを見てください：後