子要素を親の外に表示する

私のページには200pxの高さを持ち、オーバーフローが隠されたスライダーがあります。このスライダーの中には200pxのリスト項目もあります。上記のツールチップを表示するようなイメージIDにマウスを合わせると、唯一の問題はオーバーフロールールのためにツールチップが隠されていることです。子要素を親の外に表示する

私はIDが高いzインデックスを与えることによってツールチップを表示できると思ったが、それは動作していないようだ、あなたは親から壊れる子要素を取得できますか？

これは意味があると思います。簡単に言うと

私のコードの構造は以下の

あなたがのルールを破るために子要素を取得することはできません、私の知る限り

<div class="clip"> 
    <a href="" class="tooltip"><img src="myimage.jpg" style="height:200px;" /><span>tooltip stuff</span></a> 
    <a href="" class="tooltip"><img src="myimage.jpg" style="height:200px;" /><span>tooltip stuff</span></a> 
    <a href="" class="tooltip"><img src="myimage.jpg" style="height:200px;" /><span>tooltip stuff</span></a> 
</div>

CSS ...

.clip { 
    height:200px; 
    overflow:hidden; 
    width:400px; 
} 

.tooltip { 
    font-weight:bold; 
    position: relative; 
} 

.tooltip a { 
    font-weight:bold; 
} 

.tooltip span { 
    margin-left: -999em; 
    position: absolute; 
} 

.tooltip:hover span { 
    background: url("../images/backgrounds/black_arrow_big.png") no-repeat scroll 0 0 transparent; 
    font-size: 11px; 
    height: 163px; 
    left: -100px; 
    margin-left: 0; 
    padding: 40px 30px 10px; 
    position: absolute; 
    top: -200px; 
    width: 310px; 
    z-index: 99; 
}

出典

2011-09-09 Liam

に似ていますあなたが説明したように親です。代わりに、あなたは、document.bodyなどトップレベルの要素にツールチップを添付したい、とあなたはコンテナにposition: relativeを適用すると、ほとんどのjavascript

<head> 
    <style> 
     #container { 
      position: relative; 
     } 
     #tooltip { 
      position: absolute; 
      display:none; 
      width: 200px; 
      height: 100px; 
      z-index: 99; 
      background-color: gold; 
      top: 0px; 
      left: 0px; 
     } 
     .clip { 
      height: 200px; 
      width: 400px; 
      overflow: hidden; 
      background-color: #C0C0C0; 
      position: absolute; 
      top: 50px; 
      left: 0px; 
     } 
     img { 
      height: 200px; 
      width: 100px; 
      background-color: #222222; 
     } 
    </style> 
</head> 
<script> 
    function imgover(img, tip) { 
     document.getElementById('tooltip').style.display = 'block'; 
     document.getElementById('tooltip').innerHTML = tip; 
     document.getElementById('tooltip').style.left = img.offsetLeft + 'px'; 
    } 

    function imgout() { 
     document.getElementById('tooltip').style.display = 'none'; 
    } 
</script> 
<body> 
<div id="container"> 
    <div id="tooltip">Tooltip Text</div> 
    <div class="clip"> 
     <img onmouseover="imgover(this, 'Tip 1')" onmouseout="imgout()"/> 
     <img onmouseover="imgover(this, 'Tip 2')" onmouseout="imgout()"/> 
     <img onmouseover="imgover(this, 'Tip 3')" onmouseout="imgout()"/> 
    </div> 
</div> 
</body>

出典

2011-09-09 15:14:05

であなたのイメージの絶対位置に対してそれを配置することができることposition: absoluteを持つ子供は、コンテナ内に絶対にとなるようにします。したがって（0,0）はコンテナの左上隅になり、ウィンドウの左上にはなりません。コンテナからposition: relativeを削除できますが、正確なx、y位置を知っているため、ツールチップを配置する必要があります。

流体レイアウトを使用している場合は、配置する場所がわかりません。代わりに、相対的な位置付けのままにして、JavaScriptで少し調整することができます。このようなもの：

var tooltips = document.getElementsByClassName("tooltip"); 
var i; 
for (i = 0; i < tooltips.length; i++) { 
    tooltips[i].style.top = tooltips[i].parentNode.parentNode.style.top - 200; 
    tooltips[i].style.marginLeft = 0; // or display = "block" or whatever to show it 
}

このコードはテストされていません。古いブラウザではgetElementsByClassNameはサポートされていませんが、Webを検索した場合は手動で実装されています。

出典

2011-09-09 15:59:26 ThatMatthew

あなたのツールチップの位置をfixedに設定すると、このトリックを行うことができます。負のマージンを使用して親に基づいて位置を設定する必要があります。

出典

2014-06-18 06:14:26 micky2be

これは私のために働いた。 –

子要素を親の外に表示する

答えて

関連する問題