元素没有出现在背景颜色顶部

Question

我正在制作一个橙色的播放按钮，并在每次点击后更改为暂停/播放按钮。出现播放和暂停按钮，但背景颜色覆盖播放按钮但不包括暂停按钮。以下图片供参考：

按钮现在如何显示：

点击后：

出于某种原因，暂停按钮显示正常，但播放按钮根本不显示。以下是整个HTML和CSS的工作原理。

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我删除了父级的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>