只要我将 overflow: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 在 hover 事件中显示，如果它的高度超过 max-height 元素，滚动条应该出现，这是必要的。但这反过来又使箭头从屏幕上消失。 知道为什么会这样吗？对于这个特定问题有什么解决办法吗？
这是 jsfiddle 链接 http://jsfiddle.net/nNJSy/2/
您可以尝试从“#livecart”中删除 overflow:auto 并看到箭头将出现。
最佳答案
问题是 overflow:auto 会使元素尝试添加滚动条以适应宽度/高度中不可用的任何宽度/高度。这意味着可以通过滚动看到可见区域之外的任何内容。
但是该行为不会影响伪元素，因此不会将滚动条添加到父元素。
为了让伪元素箭头可见，您必须在父元素上使用overflow:visible，#livecart，like so
如果您必须使用 overflow:auto(假设元素有内容)，那么您需要使用填充为元素内的箭头腾出空间，在这种情况下添加 padding-top :30px like so
要查看每种溢出的影响，check this out
关于html - 箭头一溢出就消失 :auto element is added to other div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23767102/