Make Child element appear outside of parent
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.
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?
I hope this makes sense.
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:ho开发者_StackOverflow社区ver 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;
}
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>
You can do the trick by setting the position to fixed on your tooltip.
You'll have to set its position based on its parent by using negative margins.
When you apply position: relative to a container, it makes any children that have position: absolute be positioned absolutely inside the container. So (0,0) will be the top left corner of the container, not of the window. You can remove the position: relative from the container, but then you will have to know the exact x,y position to place the tooltip.
If you are using a fluid layout, you won't know where to position it. So instead, you can leave it with relative positioning, and then adjust it a little with JavaScript. Something like this:
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
}
Note that this code is untested. Note also that getElementsByClassName is not supported in older browsers, but you can find a manual implementation of it if you search the web.
加载中,请稍侯......
精彩评论