使子元素出现在父项外

我的页面上有一个高度为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

这对我有效。 –

使子元素出现在父项外

回答

相关问题