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

Question

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

我将位置设置为相对位置并添加 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);
}

并使一切变灰例如，对于按钮，这是有效的，我有 position: relative 就可以了，然后我只需添加 2

的 zIndex

但它不适用于 id="furtherInfosProfile" 和 changePassword。它确实应用了 zIndex，它具有相对位置，几乎没有其他任何东西，但它仍然在 "darkness" 之下。我希望它能超过它。

你能帮帮我吗？

Answer 1

确保在 ID 选择器之前有 #。另外 divs 是透明的，所以你需要给它添加一个 background-color。

这是一个代码笔 link。希望这能回答您的问题？ https://codepen.io/anon/pen/gJxJra

尝试

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

为了使按钮在黑暗中可见 - 它已经包裹在 div 中。我刚刚添加了一个 class 的按钮

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

并应用此 CSS

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

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

Why does this particular zIndex not work?

html

javascript

z-index