logo标签列表

使子元素出现在父元素外部

javascriptcss
7
我在页面上有一个高度为200px并应用了溢出隐藏的滑块，滑块内部有列表项/图片，它们也都是200px。当你悬停在图片上时，我想显示一个位于其上方的工具提示，但我的问题是由于溢出规则而隐藏了该工具提示。
我认为通过给工具提示设置更高的z-index来显示它，但似乎没有起作用，你能让子元素脱离父级吗？
希望这样说得清楚。
简而言之，我的代码结构类似于下面的内容：
<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;
}
3个回答
4
据我所知，您无法让子元素违反父元素的规则，就像您所描述的那样。相反，您可能想要将工具提示附加到顶级元素（例如document.body），并使用一些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>
1

您可以通过在工具提示上设置fixed的位置来实现这一技巧。您将不得不使用负边距根据其父级设置其位置。

0

当您将position: relative应用于容器时，任何具有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在旧版浏览器中不受支持，但是您可以在网上找到其手动实现方法。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接