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

Question

一个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

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