Question

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

...的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;
}

Answer 1

据我所知，你不能像你所描述的那样让一个子元素违反父母的规则。相反，您可能希望将工具提示附加到顶级元素（如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>

Answer 2

您可以通过在工具提示上将位置设置为fixed来实现。您必须使用负边距基于其父级设置其位置。

Answer 3

当您将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，但如果您在网上搜索，则可以找到它的手动实现。

Make Child元素出现在父元素之外

3 个答案: