带有超赞字体图标的 Z-index 不起作用

Question

我正在使用很棒的字体图标显示在按钮上，以便它显示为已单击但不完全可见。

我为此使用了 z-index，但它不起作用

如果我使用z-index: 0或更高的值

如果我使用低于 0z-index 的值

function onClick(ele) {
  document.getElementById('status1').style.visibility = 'visible';
}

.sta_tus {
  font-size: 14pt;
  font-weight: 300;
  color: #005a84;
  background-color: #d5e2ed;
  border-radius: 0px;
  border: 2px solid deepskyblue;
  height: 60px;
  width: 150px;
  margin-right: 12px;
}

.fa-check-circle {
  right: 37px;
  position: relative;
  color: #00a2db;
  bottom: 33px;
}

<html>

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>

<body>

  <button type="button" class="btn btn-md sta_tus" onClick="onClick(this)">Just an Idea</button>
  <span id="status1" class="fa-stack fa-lg ">
                <i class="fas fa-check-circle" ></i>
              </span>
</body>

</html>

对此有任何建议..

提前致谢。

Answer 1

尝试在 .fa-check-circle 上使用 background-color: #fff; - 复选标记似乎是透明的，这让矩形的边框从下方穿过。

带有超赞字体图标的 Z-index 不起作用

Z-index with font awesome icons is not working

html

css

z-index

font-awesome