CSS z-index Gotcha with Parent/Child Elements

In CSS, z-index is used to control which elements appear in front of or behind each other when they're overlapping on the screen.

However, there is one "gotcha" to note, that is if both a child and parent element has z-index defined, and you want the child to appear in front of something and the parent to appear behind, it won't work. Instead, both parent and child elements will appear behind, with the parent's z-index taking effect. This can happen for example if you have an overlay, and you want a modal window (the child) to appear on top of the overlay, while the parent element on the main page should be behind the overlay. If the parent has a z-index, then both parent and child will be behind the overlay, regardless of the z-index of the child.