Question

如何在HTML5的<video>上再加一个div用来显示一些文字

一个div中有个<video>视频，我想在视频上层显示一些文字尝试把有video的div浮动但是没有用还是会遮挡用于输入文字的div

Answer 1

你的显示文腔闭字div需要放在视频标签（video）外边才可以看到

下边是显示文字div的css样式
.wenzi{
    position: relative;
    float: left;
  伍轮裂  top: 100px;
    color: 桐兆#f00;
    width: 320px;
    height: 30px;
    text-align: center;
    z-index:1;
}

Answer 2

1、写差稿茄一个div，里面写两段多行文字，设置样式（width: 400px; height: 400px; border: solid 1px #808080）。然后用浏览器浏览，发现文字在div里很不协调。

2、样式设定“padding”的值为“20px”。（设置文字对于边框的距离，可以按敬没照比例适当调整）。

3、设置样式“font-size”的值为“small”。（其他也可以，调整大小即可）。

4、设置样式“line-height”的值为“25px”。（调整行距，适当即可）。

5、设置样式“text-indent”的值为“2em”。（首行缩进2字符）。

6、设置样式“font-family”的值为“微软雅黑”。（设虚察置字体）。

Answer 3

给你输入文字的div添加定位css：position：abusolute；给他的父籍悔基知div添加：被定位：position：relative；然后在文字div里面通过添加css：top： px； left： px。。来任意定位。再不行给video和文字div添碧消加z—index：9来管理堆叠锋尺顺序。数值越大就越置顶

Answer 4

引用kssion的回答：
你的显示文字div需要放在视频标签（video）外边才可以看到

下边是显示文字div的css样式.wenzi{ position: relative; float: left; top: 100px; color: #f00; width: 320px; height: 30px; text-align: center; z-index:1;}

你那个写法只在PC端有效果，而且还是不能全屏状态下，全歼档屏就找不到了 。 移动端也是一样 video 直接把文游衫字跟覆氏磨乱盖掉了