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

Question

我最近添加了在客户的 WordPress 网站上播放 HTML5 视频的功能。我还通过 sharedaddy (as part of JetPack 插件启用了共享按钮）。单击 link 时，我的 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 问题还是我做错了什么。

Link 到站点 here

Answer 1

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

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

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

CSS element with opacity overlaps html5 video

html

css

wordpress

jetpack