html - 元素未出现在背景色上方

我正在制作一个橙色的播放按钮，每次单击后都变为暂停/播放按钮。出现播放和暂停按钮，但是背景色覆盖了播放按钮，但没有覆盖暂停按钮。以下是供参考的图像：

现在该按钮的显示方式：



然后单击：



出于某种原因，暂停按钮似乎很好，但是播放按钮却根本不显示。这是完整的HTML和CSS，可以使用。

$(document).ready(function() {
  var icon = $('.play');
  icon.click(function() {
     icon.toggleClass('active');
     return false;
  });
});

.play {
  display: inline-table;
  width: 0%;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 60px solid #f9f9f9;
  margin: 100px auto 50px auto;
  position: relative;
  z-index: 20;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  left: 10px;

}
.play:before {
  content: '';
  position: absolute;
  top: -75px;
  left: -115px;
  bottom: -75px;
  right: -35px;
  border-radius: 50%;
  border: 10px solid #FB5100;
  z-index: 1;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  background: #FB5100;
}
.play:after {
  content: '';
  opacity: 0;
  transition: opacity 0.6s;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
}
.play:hover:before, .play:focus:before {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
}
.play.active {
  border-color: transparent;
}
.play.active:after {
  content: '';
  opacity: 1;
  width: 50px;
  height: 80px;
  /*background: #2c3e50;*/
  position: absolute;
  right: 13px;
  top: -40px;
  z-index: 555555;
  border-left: 20px solid #f9f9f9;
  border-right: 20px solid #f9f9f9;
  box-shadow: inset 30px 0 0 0 #FB5100;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center">
<a href="#" title="Play video" class="play"></a>
</div>

最佳答案

我删除了父级的z-index并更改了z-index: -1伪元素的before以使其正常工作。查看此帖子：Is it possible to set the stacking order of pseudo-elements below their parent element?

$(document).ready(function() {
  var icon = $('.play');
  icon.click(function() {
     icon.toggleClass('active');
     return false;
  });
});

.play {
  display: inline-table;
  width: 0%;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 60px solid #f9f9f9;
  margin: 100px auto 50px auto;
  position: relative;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  left: 10px;

}
.play:before {
  content: '';
  position: absolute;
  top: -75px;
  left: -115px;
  bottom: -75px;
  right: -35px;
  border-radius: 50%;
  border: 10px solid #FB5100;
  z-index: -1;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  background: #FB5100;
}
.play:after {
  content: '';
  opacity: 0;
  transition: opacity 0.6s;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
}
.play:hover:before, .play:focus:before {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
}
.play.active {
  border-color: transparent;
}
.play.active:after {
  content: '';
  opacity: 1;
  width: 50px;
  height: 80px;
  /*background: #2c3e50;*/
  position: absolute;
  right: 13px;
  top: -40px;
  z-index: 555555;
  border-left: 20px solid #f9f9f9;
  border-right: 20px solid #f9f9f9;
  box-shadow: inset 30px 0 0 0 #FB5100;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center">
<a href="#" title="Play video" class="play"></a>
</div>

关于html - 元素未出现在背景色上方，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41681583/