Dundas Chart and AJAX Calendar control overlap issue

The layout of my webpage (an ASP.Net content page) was:

Date Picker

Dundas Chart

The page displayed fine but if you click on the calendar image button of the calendar control, the view that pops up is rendered behind the chart control. This was happening in Chrome, FF & IE.

I found a discussion on Dundas support forum: http://support2.dundas.com/forum/tm.aspx?m=6100&mpage=1&key=&

Even after overriding the style class (.ajax__calendar or ajax__calendar_container) in my .css file I could not get the calendar to show up on top of the dundas chart.

Then I found a conversation on SO: http://stackoverflow.com/questions/302244/why-is-my-calendarextender-getting-overlapped-when-rendered

and the thing that worked for me was putting the style in the .ascx file

<*style type="text/css">

.ajax__calendar_container { z-index : 1000 ; }

<*/style>

I am still not sure why this happens, but that's what worked for now. If I get a satisfactory explanation I'll post here.