Z-index с шрифтом не работает. - PullRequest
Новая
       18

Z-index с шрифтом не работает.

0 голосов
/ 26 апреля 2018

Я использую значок шрифта для отображения на кнопке, чтобы он отображался как нажатый, но он не виден полностью.

Я использовал z-index для этого, но он не работает

Если я использую z-index: 0 или более высокое значение

Z-index as 0 or above

Если я использую значение z-index ниже 0

Z-index below 0

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>

Любые предложения по этому вопросу.

Заранее спасибо.

1 Ответ

0 голосов
/ 26 апреля 2018

Попробуйте использовать background-color: #fff; на .fa-check-circle - кажется, что флажок прозрачный, что позволяет границе прямоугольника проходить под ним.

...