Why is my CalendarExtender getting overlapped when rendered

.ajax__calendar_container { z-index : 1000 ; }

<style type="text/css">
   .ajax__calendar_container { z-index : 1000 ; }
</style>

.ajax__calendar {
    position: relative;
    left: 0px !important;
    top: 0px !important;
    visibility: visible; display: block;
}
.ajax__calendar iframe
{
    left: 0px !important;
    top: 0px !important;
}

<fieldset> some content... including ajax popup </fieldset>
<fieldset> some more content </fieldset>

<fieldset style="z-index: 2;"> some content... including ajax popup </fieldset>
<fieldset style="z-index: 1;"> some more content </fieldset>