Z-Index Relative or Absolute?

z-index is relative. See this detailed answer, which I wrote for a similar question.

If none of the other elements have a defined z-index, using
z-index: 1 will be fine.

Model: How is the z-index determined?

                                         z-index
<div id=A>                                Auto 1
    <div id=B>                            Auto 1.1
       <div id=C style="z-index:1"></div>          Manual 1
       <div id=D></div>                   Auto 1.1.2
    </div>                                
    <div id=E></div>                      Auto 1.2
</div>
<div id=F></div>                          Auto 2

First, the direct
child nodes of the body are walked through. Two elements are
encountered: #A and #F. These are assigned a z-index of 1 and 2. This
step is repeated for each (child) element in the document.

Then, the manually set z-index properties are checked. If two
z-index values equal, their position in the document tree are
compared.

Your case:

<div id=X style="z-index:1">          Z-index 1
    <div id=Y style="z-index:3"></div> Z-index 3
</div>
<div id=Z style="z-index:2"></div>    Z-index 2

You’d expect #Y to
overlap #Z, because a z-index of 3 is clearly higher than 2. Well,
you’re wrong: #Y is a child of #X, with a z-index of 1. Two is
higher than one, and thus, #Z will be shown over #X (and #Y).

Here is a plunker to visualize this a little better, or try the snippet below
,

.redbox,
.greenbox,
.bluebox {
  height: 100px;
  width: 100px;
  position: relative;
  color: #fff;
  padding: 3px;
}

.redbox {
  background: red;
  z-index: 1;
}

.greenbox {
  background: green;
  top: 40px;
  left: 40px;
  z-index: 3;
}

.bluebox {
  background: blue;
  top: -20px;
  left: 20px;
  z-index: 2;
}

<div id=X class="redbox">z: 1
  <div id=Y class="greenbox"> z: 3</div>
</div>
<div id=Z class="bluebox">z: 2</div>