Question

Here is the fiddle: http://jsfiddle.net/hrQG6/

HTML

<div id='map'>
    <div class='hotspot' id='hs1'>
        <div class='info-window'>
            Foobar
        </div>
    </div>
    <div class='hotspot' id='hs2'>
        <div class='info-window'>
            Foobar
        </div>
    </div>
</div>

CSS

.hotspot {
    position: absolute;
    z-index: 10;
    background-color: blue;
    height: 30px;
    width: 30px;
} 
.info-window {
    display: none;
    height: 250px;
     width: 250px;   
    background-color: green;
    position: absolute;
    z-index: 9999;
}​

The .hotspot elements show in the container. The .info-window elements do not show by default. Clicking a .hotspot will display its corresponding .info-window. However, I want the .info-window to cover any .hotspot elements underneath it.

Instead, .hotspot elements are on top of the .info-window element. Conceptually, I’m misunderstanding the use of position and z-index.

Answer 1

By removing

z-index: 10;

from your .hotspot I believe it solves your problem.

updated fiddle