代码之家 › 专栏 › 技术社区 › kadina

无法使用z索引在视频上显示按钮或文本

html5-video html css

kadina · 技术社区 · 8 年前

我需要在视频上显示播放按钮。我试过使用z-index。但它似乎不起作用。下面是html代码

html:

<!DOCTYPE html>
<html>
    <head>
        <title>text</title>
        <link rel="stylesheet" href="test.css">
    </head>
    <body style="overflow: hidden; margin: 0px;">
        <div id="d1">
            <video id="videoID" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" autoplay>
            <div id="d2">
                <h1 id="h">I am heading</h1>
                <!--<button type="button" id="play-pause" class="play">Play</button>-->
            </div>
        </div>
    </body>
</html>

CSS:

#d1
{
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    color: #2c3e50;
    margin-top: 10px;
    width: 55%
}

#videoID
{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
}

#d2 {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 15;
    left: 100px;
    top: 100px;
}

“位置:绝对”应在视频顶部显示标题。它不起作用。我把d2的z指数加到了15。但还是没用。我无法在视频上显示该按钮。如果有任何问题以及如何解决,请任何人帮助我。

1 回复 | 直到 8 年前

sol 8 年前

<video> 不是自动关闭元件。 Info from MDN

#d1 {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  color: #2c3e50;
  margin-top: 10px;
  width: 55%
}

#videoID {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
}

#d2 {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  z-index: 15;
  left: 100px;
}

<div id="d1">
  <video id="videoID" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" autoplay></video>
  <div id="d2">
    <h1 id="h">I am heading</h1>
    <button type="button" id="play-pause" class="play">Play</button>
  </div>
</div>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前