Question

在工具提示中添加overflow - 属性时，:after - 元素消失。为什么？有修复吗？

CSS：

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

HTML：

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

这是一个小提琴：

http://jsfiddle.net/tcbdjg86/5/

Answer 1

因为css中的:after实际上在它的父元素之外，所以溢出会用任何削减内容的值隐藏它

通过拉动事物以使:after重叠元素的边缘并实现指针效果，它必须突破它的父母的边界，这是由{{{{1}控制的。 1}}（溢出仍然用滚动隐藏）。

它似乎完全消失，因为它的设计使得它在父母内部的位是不可见的。见jsfiddle edit that demonstrates this

你可以在chrome检查器中看到它仍然存在 - 打开div并找到后面的，你可以将它悬停在它上面并看到它在那里，突出显示。

Answer 2

发生这种情况的原因是因为溢出实际上仍然隐藏了overflow: scroll属性。我能想出的唯一解决方法是嵌套你的滚动div：

.tooltip::after {
    border: 4px solid white;
    box-shadow: 1px -1px 0px 0px black;

    content: "";
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -11px;
    width: 0px; height: 0px;

    -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 {
    background: white;
    position: fixed;
    border: 1px solid black;
    width: 500px;
}
.scroll > * {
    overflow-y: scroll;
}

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

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

2 个答案: