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

我最近在我客户的WordPress网站上增加了播放HTML5视频的功能。 此外，我还通过 shareaddy 启用了分享按钮（作为 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的问题还是我做错了什么。
链接到该网站