Html 如何在全屏模式下将侧面板置于iFrame顶部？

我有一个iFrame和一个侧面板。在正常屏幕模式下，我的侧面板保持在iframe的顶部。但是，一旦切换到全屏，iframe就会覆盖整个屏幕。我希望侧面板即使在全屏模式下也保持在iFrame的顶部

这就是我到目前为止所做的

  <div className="main-wrapper">
      <div className="canvas">
        <iframe
          title="test"
          ref={this.iframeRef}
          height={454}
          frameBorder="0"
          allowFullScreen
          allow="vr"
          src={`https://my.matterport.com/showcase-beta?m=LMbQHfCxUoc&title=0&play=1&qs=1&hr=0&help=0&hl=2&brand=0&gt=0`}
        />
      </div>
      <div className="side_panel">
        <SidePanel />
      </div>
    </div>

---

我被卡住了。任何帮助都将不胜感激。

将

位置：绝对
添加到
和
位置：相对
添加到
.canvas
或将
.canvas
全部删除。在全屏模式下不会将边栏放在顶部。我只对您提供的内容发表了评论（当然不是全屏）。如果你真的发布了一个答案，我可能会以答案的形式给你一个实际的解决方案。顺便说一句，
如何知道
z-index
，
顶部
，
左侧
没有非静态的
位置
。那
.canvas
呢？它一点作用也没有。
.main-wrapper {
  /* display: flex;
  justify-content: space-between; */
  position: relative;
}

.side {
  height: 100vh;
  background: #0a5169 0% 0% no-repeat padding-box;
}
.side_panel {
  position: absolute;

  z-index: 100;
  width: 80px;
  right: 0;
  top: 0;
  bottom: 0;
}
.canvas {
}
.canvas iframe {
  width: calc(100vw - 80px);
  height: 100%;
  z-index: 10;
  left: 0;
  top: 0;
}

.App {
  font-family: sans-serif;
  text-align: center;
}