Trouble with z-index Css

Question

Working on css trying to get one box under another. I was taught to use the z-index ; However when I give one css code a different z index nothing happens. Everything is correctly positioned however It doesn't position one under the other. What am I doing wrong with my z-index ? This is my css so far. box1 should be shown above the check list and border

body
{
 background: #afc2df;
 }
#body
{
 bottom: 0px;
 left: 0px;
 position: absolute;
 right: 0px;
 top: 0px;
}

#box1
{
 border: 250px;
 border-style: groove;
 border-radius:35px;
 margin-left: 85px;
 position fixed;
 margin-top: 65px;
 width: 17%;
 z-index: 3;

}

#table1
{
 position fixed;
 height: 400px;
 background: #0ff;
 margin-left: 118px;
 bottom: 90px;
}
#border
{
 position: fixed;
 border-style: solid;
 width: 200px;
 height: 150px;
 padding: 2px;
 background: #708090;
 margin-left: 790px;
 margin-top: -560px;
 border-radius:35px;    
 z-index: 2;

}
#checklist{
position: fixed;
border-style: solid;
width: 220px;
height: 155px;
padding: 2px;
background: #708090;
margin-left: 790px;
margin-top: -80px;
z-index: 1;
}




.link {text-decoration: none;
}

Answer 1

Your problem will probably lay in nesting elements.

Parent element z-index is more important than the one of nested element, so if parent is bellow some element it's child can never be in front of that element.

Also the bigger z-index the more in front the element is. #checklist is z-index 1 this mean it's behind #border and #box1

Answer 2

you have some missing ":" on position fixed on box1 and table1

position fixed;

shuld be?

position: fixed;

Answer 3

If the issue EricGS pointed out is not the problem (the missing : ), then I agree with Hurda. Your issue may very well lie with nested elements. In which case, using !important as EricGS suggests will not work.

There is a thing called stack(ing) order for elements.

I have created a jsfiddle here for you to see the issue in action (and !important not working).