jQuery, how to change the z-index of datepicker

Question

When I make one $('#man_dia').datepicker(); the tag with id='man_dia' is just an input, and jQuery alone inserts the other elements into the DOM, I even get the id that jQuery generates to change via css, but the problem is that jQuery declares the z-index inside the element, so even I’m making a css like this:

#ui-datepicker-div { z-index: 999; }

Because Tilo assumes what’s on the tag, which he generates like this:

<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ui-datepicker-div" style="position: absolute; top: 132px; left: 707.7px; display: block; z-index: 1;">

What I’ve tried to do was like this:

$('#man_dia').datepicker(function(){
    $(this).css('z-index','999'); // nao resolveu
});
///////////////////////////////////////////////
$('#man_dia').datepicker(); // criar calendário primeiro
$('#man_dia').css('z-index','999'); // passar o css depois também nao resolveu
//////////////////////////////////////
$('#man_dia').datepicker();            
$('#ui-datepicker-div').css('z-index','999'); // passar o ID que o jQuery gera não resolveu

Answer 1

Use the! Important in the z-index of the desired element. So it ignores if there is another value previously defined.

#ui-datepicker { 
    z-index:999 !important; 
}