Html 使按钮悬停在iframe上

我想要4个按钮悬停在iframe上，它应该占据浏览器中100%的可用空间

实际上iframe太大了，所以出现了滚动条，而且我根本看不到任何按钮！我不明白发生了什么。。。通常我以为按钮会出现在我指定的位置，但没有用

这里是我的html、css和js：

html，
身体{
高度：100vh；
宽度：100vw；
}
#bt1{
位置：绝对位置；
宽度：50px；
高度：50px；
左：20px；
顶部：50px；
}
#bt2{
位置：绝对位置；
宽度：50px；
高度：50px；
左：20px；
顶部：120px；
}
#bt3{
宽度：50px；
位置：绝对位置；
高度：50px；
左：20px；
顶部：190px；
}
#bt4{
宽度：50px；
位置：绝对位置；
高度：50px；
左：20px；
顶部：260px；
}
#框架{
宽度：100%；
身高：100%；
}
.持有人{
宽度：100%；
身高：100%；
位置：相对位置；
}

HTML5结构
功能一（）{
$（“#theframe”）.attr（'src'，”https://www.youtube.com/embed/FTQbiNvZqaY");
}
函数二（）{
$（“#theframe”）.attr（'src'，”https://www.youtube.com/embed/TvnYmWpD_T8");
}
职能三（）{
$（“#theframe”）.attr（'src'，”https://www.youtube.com/embed/djV11Xbc914");
}
函数四（）{
$（“#theframe”）.attr（'src'，”https://www.youtube.com/embed/Xt2IcK78NOw");
}

标签不是一个自动关闭的元素，因此不是：

<iframe src="https://www.youtube.com/embed/3sYlJsaUAIg" id="theframe" frameborder="0" allowfullscreen />

最后，将按钮类型从

submit

更改为

button

，因为它们不提交数据

html，
身体{
高度：100vh；
宽度：100vw；
}
按钮式img{
宽度：100%；
}
#bt1{
位置：绝对位置；
宽度：50px；
高度：50px；
左：20px；
顶部：50px；
}
#bt2{
位置：绝对位置；
宽度：50px；
高度：50px；
左：20px；
顶部：120px；
}
#bt3{
宽度：50px；
位置：绝对位置；
高度：50px；
左：20px；
顶部：190px；
}
#bt4{
宽度：50px；
位置：绝对位置；
高度：50px；
左：20px；
顶部：260px；
}
#框架{
宽度：100%；
身高：100%；
}
.持有人{
宽度：100%；
身高：100%；
位置：相对位置；
}

功能一（）{
$（“#theframe”）.attr（'src'，”https://www.youtube.com/embed/FTQbiNvZqaY");
}
函数二（）{
$（“#theframe”）.attr（'src'，”https://www.youtube.com/embed/TvnYmWpD_T8");
}
职能三（）{
$（“#theframe”）.attr（'src'，”https://www.youtube.com/embed/djV11Xbc914");
}
函数四（）{
$（“#theframe”）.attr（'src'，”https://www.youtube.com/embed/Xt2IcK78NOw");
}

标签不是一个自动关闭的元素，因此不是：

<iframe src="https://www.youtube.com/embed/3sYlJsaUAIg" id="theframe" frameborder="0" allowfullscreen />

最后，将按钮类型从

submit

更改为

button

，因为它们不提交数据

html，
身体{
高度：100vh；
宽度：100vw；
}
按钮式img{
宽度：100%；
}
#bt1{
位置：绝对位置；
宽度：50px；
高度：50px；
左：20px；
顶部：50px；
}
#bt2{
位置：绝对位置；
宽度：50px；
高度：50px；
左：20px；
顶部：120px；
}
#bt3{
宽度：50px；
位置：绝对位置；
高度：50px；
左：20px；
顶部：190px；
}
#bt4{
宽度：50px；
位置：绝对位置；
高度：50px；
左：20px；
顶部：260px；
}
#框架{
宽度：100%；
身高：100%；
}
.持有人{
宽度：100%；
身高：100%；
位置：相对位置；
}

功能一（）{
$（“#theframe”）.attr（'src'，”https://www.youtube.com/embed/FTQbiNvZqaY");
}
函数二（）{
$（“#theframe”）.attr（'src'，”https://www.youtube.com/embed/TvnYmWpD_T8");
}
职能三（）{
$（“#theframe”）.attr（'src'，”https://www.youtube.com/embed/djV11Xbc914");
}
函数四（）{
$（“#theframe”）.attr（'src'，”https://www.youtube.com/embed/Xt2IcK78NOw");
}

这仅仅是因为我没有正确关闭iframe标记？你有一个很好的资源在哪里学习像这样的东西吗？你可以阅读更多关于html5标签的网页。中显示了带有一些附加注释的自动关闭（void）标记列表。那么这仅仅是因为我没有正确关闭iframe标记？你有一个很好的资源在哪里学习像这样的东西吗？你可以阅读更多关于html5标签的网页。中提供了带有一些附加注释的自动关闭（void）标记列表。

button img {
  width: 100%;
}