web全屏模式下浮动元素不生效

Question

如图1，筛选实例按钮，点击后会显示一个Popover，可以进行选择操作

但这个页面实际上是可以全屏的，全屏模式下，再点击筛选实例按钮，打开控制台看DOM元素，是出来了，但是在页面上不显示，如图2：

z-index设置成最大也管用，所以考虑是不是全屏是特殊情况。
不知道这是什么原因引起的，有人知道吗？

Answer 1

感谢大家的回答，已经解决了。全屏应该是用全屏api实现的。我那个弹框是相对于body定位的，body下的浮动元素在全屏的时候不会显示出来，得将浮动元素挪到全屏的元素或其中的一个子元素上，以它们为定位的父级元素，就可以啦。我用的是antd 的Popover，getPopupContainer这个api可以设置浮层渲染父节点。

<Popover
   content={this.onRenderPodsSelection()}
   trigger={'click'}
   getPopupContainer={() => document.getElementsByClassName('pointer')[0]}
   overlayClassName={'logs-pod-filter'}
   placement={'bottom'}
>
    <span className="themeColor pointer">
       <Icon type="filter" style={{ marginRight: 4 }}/>
       <span>筛选实例（已选{podNameSelected.length}）</span>
    </span>
</Popover>

Answer 2

看下相互间zindex，可能是被什么覆盖了

Answer 3

如果确定 DOM 已经生成、且不包含 display=none; 等样式，一般是 z-index 问题，从这方面入手排查一下吧。

Answer 4

1. 看下你全屏是通过什么方式实现的

2. 你的浮动元素，是 position：absolute 实现吗？如果是需要考虑下2个方面

   1. 他的所有上级元素（position：relative）是否又设置了 overflow:hidden
   2. 他的上级元素 的 z-index 也是需要查看的

另外：教你一个排除的办法
就是打开dom查看器， 不不想干的 dom，一个个的删除（这里的删除，就是你在调试工具里面用delete去删除，不用去该代码），看看最后是删除了哪个dom，他就出来了