Trying to stack with Z-Index

Question

I'm just starting a new project and I'm having trouble with using the z-index function in CSS. It just isn't working no matter what I try. I've tried swapping the values of both div's z-index and it still wont work.

#outerbox {
    position:absolute;
    height:700px;
    width:700px;
    background-color:darkgrey;
    left:570px;
    top:125px;
    z-index:1;
}

#innerbox {
    position:relative;
    height:680px;
    width:680px;
    background-color:grey;
    display:grid;
    margin: 0 auto;
    top:10px;
    z-index:0;
}