z-index not working inside position fixed element

Question

I have div which is position is fixed and another div inside the position fixed div which is position relative

<div class="wrap">
    <div class="content">
    </div>
</div>

css is:

.wrap{
    position: fixed;
    width:80%;
    height:200px;
    background-color:#a157df;
    z-index:5;
}
.content{
    position: relative;
    width:30%;
    height:100px;
    background-color:#a1a7af;
    left:80%;
    z-index:1;
}

example is in this link :

how to place 2nd div inside 1st one, i used z-index but its not working

Answer 1

I do not think you need the z-index. How about this?

.wrap {
position: fixed;
width: 80%;
height: 200px;
background-color: #a157df;
}
.content {
position: relative;
width: 30%;
height: 100px;
background-color: #a1a7af;
left: 70%;
}

This is how the z-index works if you need it. http://www.w3schools.com/cssref/pr_pos_z-index.asp