Question

当我添加溢出时，指示框中的箭头消失：auto元素到其他div。以下是代码：

CSS：

<style>
.arrow_box {
position: relative;
background: #FFF;
box-shadow:0 0 5px rgba(0,0,0,0.4);
width:500px;
border:0px;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 73%;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #FFF;
border-width: 15px;
margin-left: -15px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #dadee0;
border-width: 18px;
margin-left: -18px;
}
#livecart{max-height:500px;overflow-y:auto;} //Without overflow it works fine
#inicart{top:0px;}
</style>

HTML：

<div class='inicart'>
<div id='livecart' class='arrow_box'>
...
...
...
</div>
</div>

Livecart div显示在悬停事件＆amp;如果它的高度超过最大高度元素，滚动条应该进入画面，这是必要的。但这反过来使箭头从屏幕上消失。知道为什么会这样吗？对于这个特殊问题的任何转变？

这是jsfiddle链接 http://jsfiddle.net/nNJSy/2/

您可以尝试从'#livecart'＆amp;中删除overflow：auto。看到箭头会出现。

Answer 1

问题是overflow:auto会使元素尝试添加滚动条以适应宽度/高度中不可用的任何宽度/高度。通过滚动可以看到可见区域之外的任何内容。

然而，该行为不会影响伪元素，因此滚动条不会添加到父元素中。

为了看到伪元素箭头，您必须在父overflow:visible，like so

上使用#livecart

如果您必须拥有overflow:auto（说元素包含内容），那么您需要使用填充为元素中的箭头腾出空间，在这种情况下添加padding-top:30px like so < / p>

要查看每种类型的溢出效果check this out

一旦溢出，箭头就会消失：自动元素被添加到其他div

1 个答案: