Am I using z-index wrong?

#one {
	background-color: gray;
    width: 100%;
    height: 100%;
    z-index: -10;

	background-color: powderblue;
    width: 100%;
    height: 100%;
    z-index: 10;

Based on this CSS (referring two divs, one with the id “one” and the other with the id “two”). I want the powderblue one to be on top, but the gray one stays on top. What am I missing with z-index?

I fixed it! I had to set position to relative.


z-index probably didn’t help you in that case. Setting the position can just make it go forwards.

All you have to do to use z-index:


That’s it. Also, if #one is position:fixed and is on top, #two would never be right on top like that, so you’d have to use z-index and put the #one elem below your #two elem.