我们有一个带有标题行的React Virtualized Table。
一个（或多个）标题单元格将包含drop down，以便您选择要过滤列的值。
我们创建了Component，ValuePanel有position: absolute;，使其浮动在页面上的其他元素之上。
我们将它包含在标题中，除了HeaderRow上有overflow:none;之外，它主要起作用。
<div
class="ReactVirtualized__Table__headerRow table-toplevel-row table-toplevel-header"
role="row"
style="height: 100px;overflow: hidden;padding-right: 17px;width: 1920px;"
>
这会“切断”显示值的面板底部。
阅读overflow: none;和position: absolute;似乎ValuePanel必须在HeaderRow之外有一个（位置）父级。
这可以通过以下任一方式实现：
移动ValuePanel元素，使其不再是HeaderRow的祖先。
在HeaderRow之外使用ValuePanel元素的最近祖先position absolute或relative（即它的位置父级）。
1的问题在于，Component应该是一个独立的，可以在任何地方重复使用，因此它不应该要求它的一部分HTML存在于自身之外......这违反了“自包含”位。
2的问题是我们不能总是保证位置父级在ValuePanel上面的层次结构中的位置，除非位置父级位于Component内部。并且ValuePanel从它的位置父节点获取它的宽度，所以如果位置父节点在Component之外，那么宽度可能是错误的。
我们非常希望避免为组件和/或ValuePanel指定固定宽度。我们希望保持组件自包含。
从HeaderRow中移除overflow: none;的想法发生了，但显然有一个原因。我没有测试过，但我认为摆脱它会导致标题内容出现问题，好吧，溢出。我们可以将其替换为overflow-y: none;overflow-x: hidden;，但在某些情况下，这似乎可能会导致问题。
我有一个搜索，但我找不到任何结果。
之前有没有人实现这一目标并且可以提供一些见解？或者有其他一些想法/建议？
答案 0 :(得分：0)
现在回到我的电脑后再稍微回答：查看react-portal。
它提升了z-index堆栈中的内容（因此避免了剪切问题），同时保持了它的视觉位置（顶部/左侧），允许它在其父级的剪切rect / box之外渲染。它非常适合blockquote::before{
content: "\201C"; /*Unicode for Left Double Quote*/
position: absolute;
margin: 0 auto;
color:#000;
font-size: 50px;
top: -40px;
left: 50%;
}
或List中的下拉菜单。