CSS Z-Index Issue with Nested Elements

css z-index issue with nested elements

Don't specify any z-index to .bank to avoid creating new stacking context and simply adjust the z-index of the other elements. This will work because all the 3 elements belong to the same stacking context so you can specify any order you want.

.bank {  position:relative;  background: red;  width: 500px;  height: 200px;}
.card {  position: absolute;  top:0;  z-index: 2;  height: 100px;  width: 400px;  background: blue;}
.button {  position: absolute;  top: 0;  z-index: 1;  height: 150px;  width: 450px;  background: yellow;}
.container {  position: relative;}

<div class="container">  <div class="bank">    <div class="card"></div>  </div>
  <div class="button"></div></div>

Z-index: How to make nested elements appear underneath their parent element

You don't.

Instead, make the a be the "Sign In" "button".

Something like this: http://jsfiddle.net/5sqxQ/15/

Why is a nested z-index not working

You need to set the position property to relative, absolute or fixed on the button for z-index to be considered:

.overlay-message {    position: fixed;    top: 0;    left: 0;    height: 100%;    width: 100%;    display: table;    background-color: rgb(0, 0, 0);    opacity: .9;    z-index: 9998;}h4 { display: table-cell;color: #fff;text-align: center;vertical-align: middle; }.container {    align-items: center;    width: 100%;    max-width: 100%;    height: 100%;}.row {    display: table !important;    align-items: center;    justify-content: center;}    .one-fifth-flex {        width: 50%;        padding-bottom: 20px;        float: left;    }
    .ico-btn {        position: relative;        background-color:transparent;        color:rgb(26, 188, 156);        border-color:rgb(26, 188, 156);        border-style: solid;        border-width: 10px;        width:100px;        z-index: 9999;}

<div class="overlay-message">      <h4>Hey! Tap on the button above!</h4></div><div class="container">    <div class="row">        <div class="one-fifth-flex">            <div role="button"  class="ico-btn">                Me            </div>        </div>    </div></div>

z-index for the nested div

Because the .child is relative to its .parent, so does its z-index.

You can do away with this by removing the z-index of the parent:

.sel_project_block {  background-color: #f5876e;  border-radius: 14px;  margin-right: 150px;  width: 239px;  height: 34px;  display: flex;  justify-content: flex-end;  align-items: center;  position: relative;  box-shadow: 1px 3px 7px #000;}
.additional {  height: 50px;  max-width: 185px;  position: absolute;  top: 76.2%;  right: 22.05%;  z-index: -1;  color: #67573e;  background-color: #fff;  border: 1px solid #978d7e;  font-size: 16px;  width: 185px;}

<div class="sel_project_block">  <div class="additional"></div></div>

CSS: Nested Element Z-Index Issue

try this:
add position and z-index here:

.noteClickArea {
  height:16.66%;
  z-index:2;
  position:relative;
}

and remove z-index here:

.stringTitle {
  z-index:1; // REMOVE IT
}

see results here: http://jsfiddle.net/LZxxB/4/

CSS Z-Index Issue with Nested Elements