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

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>

三網融合

.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 個解決方案

解決方案1
4 已采納 2011-09-09 15:14:05

解決方案2
1 2014-06-18 06:14:26

解決方案3
0 2011-09-09 15:59:26

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

問題描述

3 個解決方案

解決方案1 4 已采納 2011-09-09 15:14:05

解決方案2 1 2014-06-18 06:14:26

解決方案3 0 2011-09-09 15:59:26

解決方案1
4 已采納 2011-09-09 15:14:05

解決方案2
1 2014-06-18 06:14:26

解決方案3
0 2011-09-09 15:59:26