Почему этот конкретный zIndex не работает?

Question

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

Iустановите относительное положение, и я добавляю z-Index

, это HTML:

<div id="contentContainerModule">
        <div class="row">
            <div class="col-lg-7" id="userProfileOverview">
               // some more thml
             </div>
        <div class="row">
            <div class="col-lg-7" id="furtherInfosProfile">
                <div class="form-group">
                    <label class="control-label">
                        label
                    </label>
                    <div class="form-control-plaintext">
                        personnelNmbr
                    </div>
                </div>
                <div class="form-group">
                    // other info
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-7" id="changePassword">
                <div class="form-group">
                    <label class="control-label">
                       username
                    </label>
                   // other div
                </div>
            </div>                
        <div class="row">
            <div class="col-lg-7" id="languageSettings">
                <div class="form-group">
                   // something
                </div>
            </div>
        </div>
        <hr>
    <div class="text-center">
        <button type="submit" class="btn btn-success" id="saveButtonProfile">save</button>
    </div>
</div>
<div id="darkness"></div>

Таким образом, тег темноты

darkness {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
}

и делает все серымдля кнопки, например, это работает, и у меня есть положение: относительно него, тогда я просто добавляю zIndex 2

, но это не работает для id = "Далее в ИнфоПрофиля" и для ChangePassword.Он применяет zIndex, имеет относительное положение и почти ничего, но он все еще находится под «тьмой».И я ожидаю, что это будет выше.

Не могли бы вы помочь мне?

Answer 1

Убедитесь, что у вас есть # перед селектором идентификатора.Также div прозрачны, поэтому вам нужно добавить цвет фона.

Вот ссылка на кодовый блок.Надеюсь, это ответит на ваши вопросы?https://codepen.io/anon/pen/gJxJra

Попробуйте

#furtherInfosProfile {
  z-index: 2;
  background-color: white;
  position: relative;
}

, чтобы кнопка была видна в темноте - она ​​уже завернута в div.Я просто добавил класс кнопки

<div class="text-center button">
    <button type="submit" class="btn btn-success" 
    id="saveButtonProfile">save</button>
</div>

и применил этот CSS

.button {
  z-index: 10000;
  position: relative;
}