如何在绝对位置 iframe 上添加按钮，同时仍然能够与之交互？

Question

我的标记完全按照这个顺序：

  <iframeContainer>
    <iframe>
  </iframeContainer>
  <container>
    <button1>
    <button2>
    <sidebar>
    ...
 </container>

container 应该位于 iframe 本身之上。不幸的是，由于我的 container 有 100% w/h 并且显然不允许点击 iframe 本身，所以我无法让它们正常播放。示例：

const buttonThatIWannaClick = document.getElementById('buttonOverIframe');

buttonThatIWannaClick.addEventListener('click', function() {
  console.log('I am able to click the button!');
});

#videoContainer {
  position: absolute;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

#buttonOverIframe {
  position: absolute;
  color: white;
  top: 50%;
  left: 50%;
}

#videoContainer iframe {
  width: 100%;
  height: 100%;
}

#container {
  display: flex;
  position: absolute;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

#openSidebar {
  display: flex;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 30px;
  color: white;
  transform: translate3d(0, 50%, 0);
}

<div id="videoContainer">

  <div id="buttonOverIframe">Button Inside Iframe</div>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/5qap5aO4i9A" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="container">
  <div id="openSidebar">Open Sidebar</div>
</div>

您可以看到我无法与 iframe 进行交互。 **我明白这是因为 container 有 100% width/height 即使肉眼看不到它，浏览器也会看到它在前面。

我怎样才能重新安排这样的事情：

我可以通过 iframe 与按钮交互。
我可以检测iframe/on以外的点击吗？

Answer 1

对容器使用 pointer-events: none;，对活动元素使用 pointer-events: initial

const buttonThatIWannaClick = document.getElementById('buttonOverIframe');

buttonThatIWannaClick.addEventListener('click', function() {
  alert('I am able to click the button!');
});

#videoContainer {
  position: absolute;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

#buttonOverIframe {
  position: absolute;
  color: white;
  top: 50%;
  left: 50%;
}

#videoContainer iframe {
  width: 100%;
  height: 100%;
}

#container {
  display: flex;
  position: absolute;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

#openSidebar {
  display: flex;
pointer-events: initial;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 30px;
  color: white;
  transform: translate3d(0, 50%, 0);
}

<div id="videoContainer">

  <div id="buttonOverIframe">Button Over Iframe</div>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/5qap5aO4i9A" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="container">
  <div id="openSidebar">Open Sidebar</div>
</div>

如何在绝对位置 iframe 上添加按钮，同时仍然能够与之交互？

How can I add buttons over an absolute position iframe while still be able to interact with it?

html

css

iframe

z-index

css-position