css - 我可以让内容重叠滚动条吗？ CSS

Question

我遇到这样一种情况，当悬停“foo”元素时，“bar”div 会显示有关“foo”元素的一些信息。但是滚动条与之冲突，并隐藏了我的 div 的其余部分。我可以让它以某种方式显示完整的“栏”div 吗？

HTML

<div class="box">
    <div class="foo">
        xxx
        <div class="bar">Info text, info text</div>
    </div>
</div>

CSS

.box {
    height: 80px;
    width: 80px;
    background: blue;
    position: absolute;
    overflow-y: scroll;
    overflow-x: hidden;
}
.foo {
    float: left;
    background: red;
    height: 50px;
    width: 50px;
    position: relative;
}
.bar {
    float: left;
    height: 20px;
    width: 125px;
    background: orange;
    position: relative;
    top: -10px;
    right: -30px;
    display: none;
}
.foo:hover > .bar {
    display: block;
}

Answer 1

您可以将 .bar div 设置为 position:fixed

JSfiddle Demo

CSS

.box {
    height: 80px;
    width: 80px;
    background: blue;
    position: absolute;
    overflow-y: scroll;
    overflow-x: hidden;
}
.foo {
    float: left;
    background: red;
    height: 50px;
    width: 50px;
}
.bar {
    height: 20px;
    width: 125px;
    background: orange;
    position: fixed;
    display: none;
}
.foo:hover > .bar {
    display: block;
}