In the following code, I have 3 divs all are position: absolute.
I want div1 between div2 and div3. To achieve this I have given z-index as follows: div1 (0), div2 (-1), div3(1) but after doing this, I am getting div1 on the top instead of middle. I understand this is happening because of how stacking context work and div3 is stacking wrt div2.
My question is: how can I put div1 between div2 and div3.
Pls note I can't change following things:
- I can't change 
HTMLcode - all divs must be 
position: absolute 
div {
    height: 50px;
    position: absolute;
}
.div1 {
    background: red;
    z-index: 0;
    width: 50px;
}
.div2 {
    width: 100px;
    background: green;
    z-index: -1;
}
.div3 {
    top: 20%;
    width: 75px;
    background: blue;
    z-index: 1;
}
<div class="div1">
    div1
</div>
<div class="div2">
    div2
    <div class="div3">
        div3
    </div>
</div>