使子元素出現在父項外

我的頁面上有一個高度爲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>

三網融合

.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，但如果您搜索網頁，則可以找到它的手動實現。

來源

2011-09-09 15:59:26 ThatMatthew

您可以通過在工具提示上將位置設置爲fixed來實現。您必須使用負邊距基於其父項設置其位置。

來源

2014-06-18 06:14:26 micky2be

這對我有效。 –

使子元素出現在父項外

回答

相關問題