Question

我之前有一个带箭头的div。

问题是，当我添加：

overflow-y: auto;

箭头消失了。

https://jsfiddle.net/z95frkuv/

#n { 
 position: fixed; 
 min-width: 140px;
 min-height:100px;
 max-height:400px;
 //overflow-y: auto; // need to remove this to see arrow
 border:1px solid #000;
 z-index:3000;
}
#n:before {
 content: "";
 vertical-align: middle;
 margin: auto;
 position: absolute;
 left: 0;
 right: 0;
 bottom: 100%;
 width: 0;
 height: 0;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-bottom: 10px solid #000;
}

为什么？

Answer 1

overflow:auto与overflow:hidden的工作方式类似于绝对定位元素。

为了克服它，添加一个包装div：

<div class="wrapper">
  <div id=n>content<br>content<br>content<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br></div>
</div>

并更新css：

.wrapper { 
 position: fixed; 

 z-index:3000;
}
.wrapper:before {
 content: "";
 vertical-align: middle;
 margin: auto;
 position: absolute;
 left: 0;
 right: 0;
 bottom: 100%;
 width: 0;
 height: 0;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-bottom: 10px solid #000;
}

#n{
  min-width: 140px;
 min-height:100px;
 max-height:400px;
 overflow-y: auto;
 border:1px solid #000;
}

小提琴：https://jsfiddle.net/yow7wm7r/1/

Answer 2

这正是溢出正在做的事情，如果在框内定义了一个元素，但是css将其粘在外面，溢出会将其剪掉。

https://en.wikipedia.org/wiki/Huffman_coding

溢出-y auto和箭头不能一起工作

2 个答案: