Make Child元素出现在父元素之外 [英] Make Child element appear outside of parent
问题描述
我的页面上有一个滑块，高度为200px并且已应用溢出隐藏，在此滑块内有列表项/图像，它们也是200px。当您将鼠标悬停在图像ID上方以显示上面的工具提示时，我唯一的问题是由于溢出规则而隐藏了工具提示。
I have a slider on my page that has a height of 200px and has overflow hidden applied, inside this slider there are list items/images which are aall also 200px. When you hover over the image id like to show a tooltip above, my only problem is that the tooltip is hidden due to the overflow rule.
我认为id能够通过给它提供更高的z索引来显示工具提示，但这似乎没有用，你能让孩子元素与父母分手吗？
I thought id be able to show the tooltip by giving it a higher z index but that didnt seem to work, can you get child elements to break from their parent?
我希望这是有道理的。
简而言之，我的代码结构类似于下面的
In brief my code structure is similar to the below
<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;
}
推荐答案
据我所知你不能像你所描述的那样让一个子元素破坏父母的规则。相反，您可能希望将工具提示附加到顶级元素（例如document.body），并使用一点javascript将其放置在图像的绝对位置
To the best of my knowledge you can not get a child element to break the rules of a parent as you have described. Instead, you may want to attach the tooltip to a top level element such as document.body, and position it against the absolute position of your image with a little 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>
这篇关于Make Child元素出现在父元素之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
