z-index inherits from the parent element
So if your 1
element has a z-index of 100, your 3
element cannot exceed that value in the global scope. In the local scope (within the #content
element), the z-index will essentially "reset"
So to make your thing work, you'll need to change the HTML markup to make each element independent (so they can have sequential z-index in the global scope)