Databases
StackOverflow2013
Postsdbo
POCSS z-index mystery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS z-index mystery
    text
    copied!<p>I have some problems with CSS and z-index. Let me show you an example</p> <p><a href="http://img151.imageshack.us/img151/4714/tagmistery.jpg" rel="nofollow noreferrer">example http://img151.imageshack.us/img151/4714/tagmistery.jpg</a></p> <p>Suppose that on a first moment it only appears the tag pointers. Then, when I click one of this pointers appears a tag globe. I want that the tag pointers appears always under the tag globes, and I want too that every time I open a tag globe it appears over all other tag globes opened.</p> <p>My div structure is:</p> <pre><code>&lt;div id="t01" class="tag"&gt; &lt;div class="small"&gt; &lt;div class="globe"&gt; &lt;div class="in-globe"&gt; &lt;!--tag globe content--&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="globe-arrow"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And the related CSS code is this:</p> <pre><code>.tag { z-index: 3; position: absolute; left: 0; /*JavaScript modified*/ top: 0; /*JavaScript modified*/ width: 19px; height: 26px; padding: 0 11px 10px 15px; background: url('../../images/zoom/tag.png') no-repeat center; } .small { cursor: pointer; width: 19px; height: 26px; } .globe-arrow { position: absolute; left: 23px; bottom: 30px; width: 8px; height: 6px; background: url(../../images/zoom/tag_arrow_UR.gif) no-repeat; z-index: 5; } .globe { position: absolute; left: 23px; bottom: 30px; z-index: 4; } .in-globe { font-size: 11px; margin: 0 0 3px 3px; padding: 3px; background: #FFF; border: 1px solid #000; } </code></pre> <p>The 'tag' is all the conglomerate, and its background is the tag pointer image. However, this image has some shadows and I only want that a certain zone can be clicked. Then, the 'small' div has this function. The 'globe' and 'in-globe' divs are where the content of the globe is written (it could be an only div, there are two for historical reasons), and the 'globe-arrow' div is basically a little image to show this small arrow over the globe.</p> <p>With this structure it doesn't work. In a same conglomerate, a globe is always over a tag, but an entire conglomerate defined before in the html code appears entirely under a newer one. In the same way, although a globe is inserted by JavaScript always after an older one (logically) the tag conglomerate is inserted when the page is loaded and then the overlapping works like I said.</p> <p>Can you propose an smart way to reach my objective? Think that I'm interested on positioning the globe respective to the tag, because when I drag a pointer with a globe opened I want that the globe moves with it by CSS, not by JavaScript.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload