Draw element below child element of another element

I am trying to create an overlay of creases on top of a Google Map, to make the map look like a real map on a table. The creases are 2 pixel lines positioned above the map. This looks good and doesn't ruin interaction with the map too much, only 6 out of 500 vertical lines are unavailable to click and using a javascript library called ext-forward on better browsers the clicks are forwarded, which lessons the issue.

The problem lies in that the Markers placed on the map are drawn below the creases, yet still have 3d style shadows.

The markers are children of the map div, and the creases are on the same level as the map div. IE the creases and the map are siblings. The map is z-index 0 and the markers are z-index < 100. No matter what z-index I give the creases开发者_JS百科 they will draw above the map div or below, never between. Is there any way of changing this?

Looks like you will have to add the creases as the children of the map div with z-index less than markers but greater than the map itself. Use JavaScript or jQuery to append the creases objects to the map object when necessary (I assume the map object contents are refreshed at certain points).

Here's the spec for how things should be drawn. I think it's rule 9 that covers two absolutely positioned items with a positive, non-zero z-index, but honestly I don't quite have a good visualization of how all the objects in your situation are positioned and where they are in the tree to know exactly which rules should apply. Some sample HTML might help folks interpret the rules for your particular situation.

The simplest solution would be to put the creases in the same parent as the markers and make sure they're both position: absolute in order to precisely control z-order with z-index. If they aren't position: absolute, then it's probably child order that would control things.