Javascript 为什么这个特殊的zIndex不起作用？

我正在尝试构建一个向导，引导人们完成我们的程序，我将获取每个元素，在其上放置更高的z索引以突出显示它，并添加带有一些有用信息的工具提示

我将位置设置为相对，并添加z索引

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

让一切都变成灰色 例如，对于按钮，这是有效的，我在它上面有position:relative，然后我只添加2的zIndex

但它不适用于id=“FutureInfoSprofile”和changePassword。它确实应用了zIndex，它有相对位置，几乎没有其他东西，但它仍然处于“黑暗”之下。我希望它能超越它

你能帮帮我吗？

确保在id选择器前有#。 此外，div是透明的，因此需要为其添加背景色

这里有一个代码笔链接。希望这能回答你的问题？

试一试

为了让按钮在黑暗中可见，它已经被包装在一个div中。我刚刚添加了一个按钮类

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

---

您忘记了id选择器前的#符号了吗？您似乎没有关闭许多行div，但您需要了解-按钮与黑暗不在同一堆叠上下文中，因此它不能有更高的z索引将其带到前面OMG非常感谢！我没有背景色。这就是为什么我看不见潜水艇！不确定按钮是否也可见？我编辑了我的答案以解决此问题。：）嗨，是的，谢谢你，按钮起作用了。。这就是为什么我如此困惑的原因。。你是救命恩人哈哈

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

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

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