javascript - 上下文/弹出菜单在黄金布局的拆分器上被剪切

Question

我想在树视图中显示项目的上下文菜单。菜单应显示在所有其他元素的顶部，并且还应跨越 GoldenLayout ( http://golden-layout.com/ ) 的边界。但是，菜单在拆分窗格上被“剪切”：

我试图设置一个绝对值position并增加z-index. 那没有帮助。也许原因是overflow = hidden某些父 div 的样式？

=> 如果我想让我的上下文菜单跨越 lyout 边界，那么修改 GoldenLayout 配置的正确方法/位置是什么？

（我只希望上下文菜单跨越边界，而不是树视图的其他内容。）

var menu = selection.append('div')
           .className('treez-context-menu'); 

---

 .treez-context-menu {
    position: absolute;
    z-index: 100;
    display: none; 
    outline: thin solid lightgrey;
    background-color: white;
}

有关的：

CSS 我希望一个 div 位于一切之上

Answer 1

将菜单的 css 位置从绝对更改为固定就可以了：

.treez-context-menu {
    position: fixed; //changed from absolute to fixed
    z-index: 100;
    display: none; 
    outline: thin solid lightgrey;
    background-color: white;
}