Can't get z-index to work for div inside of another div

Question

I\'m trying to get a drop down menu to work. It consists of an LI with a DIV that appears when the LI is hovered. I want the parent to be drawn in front of the child so that

Answer 1

I can give you a common example about Bootstrap Modals. Consider that your #test_1 is my .modal-body and your #test_2 is my custom <select> box, OK? #test_2 is inside #test_1. Simple as that.

I just have had to make sure #test_1 overflow computed property is not "auto" or "scroll" or "hidden", otherwise, the modal would cut my <select> box listing in the middle. My current .modal-body overflow is initial

Answer 2

A positioned container always contains its children. You can't have the content of a container below the container itself. See this test file that I made (about 7 years ago) showing the situation.

Note in particular that the dark blue div is z-index:-100, but doesn't appear below its z-index:3 parent container, nor below a different z-index:2 container that is its "uncle" (sibling of its parent).

The z-index of an element is only valid with respect to other elements using the same positioned container. Once you set position:relative on test_1 you are causing its z-index to be in a different world than the z-index of test_2. The closest you can do is set #test_2 { z-index:-1 } to cause it to appear below the content of #test_1 (but not below its background).