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

Question

我正在制作一个橙色的播放按钮，每次点击后都会变为暂停/播放按钮。出现播放和暂停按钮，但背景颜色覆盖播放按钮而不是暂停按钮。以下是供引用的图片:

按钮现在的显示方式:

点击之后:

出于某种原因，暂停按钮显示得很好，但播放按钮根本不显示。这里是整个 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>

Answer 1

我删除了父级的 z-index 并将 before 伪元素的 z-index: -1 更改为让它工作。查看这篇文章: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>