具有不透明度的 CSS 元素与 html5 视频重叠

Question

我最近在客户的 WordPress 网站上添加了播放 HTML5 视频的功能。 我也有sharedaddy 启用的共享按钮（作为JetPack 插件的一部分）。 单击链接时，我的 HTML5 视频由 JavaScript 动态打开。 我期待，当元素变得可见时，它将与所有其他元素重叠，但共享按钮始终显示在视频上方。

下面是 CSS 的样子：

HTML5 视频：

video {
  width: 320px;
  height: 186px;
}

video {
  object-fit: contain;
}

.podPress_content {
  border: 0;
  margin: 0;
  line-height: 15px;
  padding: 0;
  font-size: 80%;
  text-align: left;
  display: block;
}

分享按钮 CSS：

li.share-facebook a.sd-button > span {
  background-image: url('images/facebook.png');
}

.sd-social-icon a.sd-button > span {
  padding: 3px;
  width: 16px;
  height: 16px;
  text-indent: -9999px;
  background-position: center center;
  background-repeat: no-repeat;
}

a.sd-button > span {
  padding: 4px 8px;
  display: block;
  opacity: 0.8;
  line-height: 1.5em;
  text-shadow: none;
}

在玩过 CSS 之后，我注意到，当 opacity 更改为 1.0 时，共享按钮在 <video> 后面移动，但任何值 1.0 时，按钮都会移动到前面。 是 CSS 问题还是我做错了什么。

链接到网站here

Answer 1

只需将z-index:1 添加到您的.podPressPlayerSpace，它将如下所示：

.podPressPlayerSpace {
  position: absolute;
  z-index: 1;
}