Why does this particular zIndex not work?

Question

I am trying to build a wizard that guides people through our program and I am taking each element, put a higher z-Index on it to highlight it and add a tooltip with some helpful info.

I set the position to relative and I add the z-Index

this is the 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>

So the darkness tag is

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

and makes everything grey for the button for example this works and I have position: relative on it, then i just add the zIndex of 2

but it doesn't work for the id="furtherInfosProfile" and for changePassword. It does apply the zIndex, it has position relative and almost nothing else but it is still underneath the "darkness". And I expect it to be above it.

Can you please help me?

Answer 1

Make sure you have # before the id selector. Also divs are transparent so you will need to add a background-color to it.

Here's a codepen link. Hopefully this answers your questions? https://codepen.io/anon/pen/gJxJra

Try

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

for the button to be visible under the darkness - It's already wrapped in a div. I just added a class of button

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

and applied this CSS

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