1

我最近在客户的 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 问题还是我做错了什么。

链接到这里的网站

4

1 回答 1

1

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

.podPressPlayerSpace {
  position: absolute;
  z-index: 1;
}
于 2015-07-20T02:02:56.473 回答