html - 如何在 <iframe> 之上叠加 <textarea>？

Question

我希望能够在正在播放的视频之上使用全屏文本区域。我以为 position: fixed;顶部:0；可能有效，但没有。

HTML

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/HIDDEN?rel=0?version=3&autoplay=1&controls=0&&showinfo=0&loop=1" frameborder="0" allowfullscreen></iframe>
<textarea></textarea>

CSS

* {
  box-sizing: border-box;
  font-family: consolas;
  font-size: 100%;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

textarea {
  position: fixed;
  resize: none;
  width: 100%;
  height: 100%;
}

Answer 1

添加一个带有 position: relative 的父元素，然后在 textarea 上使用 position: absolute 将其放在您想要的位置。

* {
  box-sizing: border-box;
  font-family: consolas;
  font-size: 100%;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

.parent {
  position: relative;
}

textarea {
  position: absolute;
  resize: none;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

<div class="parent">
  <iframe width="100%" height="100%" src="https://www.youtube.com/embed/HIDDEN?rel=0?version=3&autoplay=1&controls=0&&showinfo=0&loop=1" frameborder="0" allowfullscreen></iframe>
<textarea></textarea>
</div>