Question

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

我将位置设置为相对，然后添加z-Index

这是html：

void setDataMock(int *ptr) {
  *ptr = 5;
}
MockRepository mocks;
mocks.OnCallFunc(setData).Do(setDataMock);
// Or
mocks.OnCallFunc(setData).Do([](int *ptr) {
  *ptr = 5;
});

int p;
setData(&p);
printf("Value of p: %d\n", p);

黑暗标签是

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

并使所有内容变灰以按钮为例，它的工作原理是，我在上面有位置：相对，然后我将zIndex添加为2

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

你能帮我吗？

Answer 1

确保在ID选择器之前输入＃。而且div是透明的，因此您需要为其添加背景色。

这是一个Codepen链接。希望这能回答您的问题？ 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;
}

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

1 个答案: