Html 为什么添加溢出隐藏：之后以及如何修复它？

将

溢出

-属性添加到工具提示时，

:after

-元素消失。为什么？有办法吗

CSS:

HTML:

无卷轴




带卷轴

这是一把小提琴：

---

因为css中的

：after

实际上位于其父元素之外，所以溢出将使用剪切内容的任何值将其隐藏

通过拉动物体使

：在

重叠元素的边缘并实现指针效果后，它必须突破其父元素的边界，这是由

溢出：滚动控制的（溢出仍然隐藏在滚动中）

它似乎完全消失了，因为它的设计使得父对象内部的比特是不可见的。看到这个了吗

你可以在chrome inspector中看到它仍然在那里-打开div并找到after，你可以将鼠标悬停在上面，看到它在那里，高亮显示。
发生这种情况的原因是溢出实际上仍然隐藏在
溢出：滚动
属性中。我能想到的唯一修复方法是嵌套您的滚动div：


.tooltip:：after{
边框：4倍纯白；
盒影：1px-1px 0px 0px黑色；
内容：“；
位置：绝对位置；
顶部：0px；
左：50%；
左边距：-11px；
宽度：0px；高度：0px；
-webkit转换原点：0；
-moz变换原点：0；
-ms变换原点：0；
变换原点：0；
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
-ms变换：旋转（-45度）；
变换：旋转（-45度）；
}
.工具提示{
背景：白色；
位置：固定；
边框：1px纯黑；
宽度：500px；
}
.滚动>*{
溢出y：滚动；
}




无卷轴




带卷轴
有趣的是，当使用
工具提示上的
位置：fixed
insetad of
absolute
时，它似乎可以工作
.tooltip:after {
    border: 4px solid white;
    box-shadow: 1px -1px 0px 0px black;

    content: "";
    position: absolute;
    width: 0; height: 0;

    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;

    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.tooltip {
    position: fixed;
    border: 1px solid black;
    overflow-y: scroll;
    width: 500px;
}

<br>
<br>
<div class="tooltip">Without scroll</div>
<br>
<br>
<div class="tooltip scroll">With scroll</div>