Let’s quickly go over the basics. The default position value of any HTML element is static. Any element with the default value of static is a non-positioned element.

• Positioned elements with positive z-index values are placed in front of non-positioned elements.
• Positioned elements with negative z-index values are placed behind non-positioned elements.
• A z-index can be any positive (or) negative number including zero. It has no effect on a non-positioned element — position value of static.

Here is the key part - a child’s z-index has no effect outside its group. div3’s z-index determines its position in the stacking order only among its siblings and has no effect outside its group. This is the reason setting even a large value like 99999 to div3 won't place it in front of div1.