Question

＆lt; p＆gt;我希望能够在正在播放的视频之上使用全屏textarea。我想位置：固定;顶部：0;可能会有效，但事实并非如此。＆lt; / p＆gt; ＆LT; p为H. HTML＆LT; / p为H. ＆lt; pre＆gt;＆lt; code＆gt;＆lt; iframe width =＆＃34; 100％＆＃34;高度=＆＃34; 100％＆＃34; SRC =＆＃34; HTTPS：？//www.youtube.com/embed/HIDDEN相对= 0版本= 3及自动播放= 1＆安培;对照= 0＆安培;＆安培; showinfo = 0＆安培;循环= 1＆＃34; FRAMEBORDER =＆＃34; 0＆＃34;的allowFullScreen＆GT;＆LT; / iframe中＆GT; ＆LT; TextArea＆GT;＆LT; / textarea的＆GT; ＆LT; /代码＆GT;＆LT; /预＆GT; ＆LT; p为H. CSS＆LT; / p为H. ＆lt; pre＆gt;＆lt; code＆gt; * { box-sizing：border-box; font-family：consolas; font-size：100％; 保证金：0; 填充：0; } html，body { 宽度：100％; 身高：100％; } textarea { 位置：固定; 调整大小：无; 宽度：100％; 身高：100％; } ＆LT; /代码＆GT;＆LT; /预＆GT;

Answer 1

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

* {
  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>

如何在＆lt; iframe＆gt;上叠加<textarea>？

1 个答案: