debug map object css styling

[DavidMarquardt]

Hello,

I have an app that runs in a small space - 400 x 500 px.  In order to do this, I'm having the map object cover the entire space, and all other elements sit on top of it (title, text and legend).  My legend is created outside of of the default map legend. When I change the map object styling - in this case position:relative - I loose the ability to have a click event on the map (in debugging, added a click event that works only when position is absolute).  If I keep it absolute (and the child elements position themselves according to the window instead of map), then I am able to click on map. 

I want to figure out what could be 'covering' the map object, making it unclickable. Or, find out if the map object just looses functionality when changing the position to relative.

Here's what the app looks like:

the map creation script looks like this:

app.map = new esri.Map("map", {

     extent : ext,

     showAttribution : false,

     logo : false,

     navigationMode : "classic"

});    

The html looks like this:

<div id = "map">

     <div id = "TitleLayer">

          <span id = "title"> ERS ATLAS</span>

     </div>

     <div id= "legend">

          <div id= "units" ></div>

          <table id = "legend" border = '1'>

                <tbody id = "tabBody1">

               </tbody>

          </table>

     </div>

     <div class="note" > Click map to zoom <br>To pan, click and hold while moving pointer>

</div>

On the css side, the legend, title and notes all have a position of 'absolute' and the map object has a position of 'relative'

I'm guessing that some object, while map is in relative mode, is covering it up.  While debugging elements in the browser, it seems like these three children objects don't cover a larger space than what is shown in the illustration above. 

Anybody had a similar issue?  Any ideas on how to better debug this situation?

David

P.S., I'm using the js api 3.10.

[ChrisSergent · Accepted solution]

If you are saying that the legend and other elements are covered by the map because the map takes up the entire space, you can set a z-index:0; in your css for the map like so:

#map
{
     z:index:0;
}

#legend
{
     z:index:50;
}

This will place your legend on top of the map. If the legend is not where you want it, you may want to use absolute positioning.

[DavidMarquardt]

Chris,

Thanks, this is helpful.  while I had the legend, and other objects with a high z-index, i had the map set at -1 value,because of other issues (popups).  Once I changed the z value to a positive value, the map was clickable. 

[DavidMarquardt]

here's an attached example.  If you change the z-index to -1, you can click on the map as long as the css style position is absolute.  As soon as you change it to relative and position child elements according to the parent, the map itself becomes un-clickable.  Make the maps z-index positive, though, and this problem goes away.

Also, am wondering how to have a child positioned to the parent, but outside the object (such as just below it).  If i change the text in my example (#message) to be below the map object (bottom:-40, for example)   it is hidden.  Any thoughts on how to solve this?

David