Why doesn't ui-dialog z-index change?

Question

I have a div with z-index: 1000000 and, using JQuery UI, I'm trying to make a dialog appear over it. So I added in the CSS

.ui-dialog{z-index: 1000002 !important;}

but the dialog is still under the other div and looking with Chrome inspector, I see a z-index of 101. From the Chrome inspector I see:

<div tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-dialog-buttons" aria-describedby="dialog" aria-labelledby="ui-id-3" style="height: auto; width: 300px; top: 379.113px; left: 284.488px; z-index: 101;">

it is like my definition of .ui-dialog isn't read, but I cannot understand why.

The dialog is also modal, and if I add

.ui-front {z-index: 1000001 !important;}

the dialog appears over the div with z-index 1000000, but I cannot click it (it=the dialog).

Can you help me?

Edit1: I'm using JQuery 3.2.1 with JQuery UI 1.12.1, Redmond theme

Edit2: I'm opening the dialog with the followin code

$("#dialog").dialog({
    autoOpen: false, 
    modal: true,
    draggable: false,
    resizable: false,
    title: title,
});

var buttons = {};
buttons[noButtonName] = function() {
    $( this ).dialog( "close" );
    noFun();
};
buttons[yesButtonName] = function() {   
    $( this ).dialog( "close" );
    okFun();
};
$('#dialog').dialog('option', 'buttons', buttons);
$("#dialog").dialog("open");

Edit3: The HTML for the dialog is the following:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Add</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div> 

    <div class="inline" style="position: relative; width: 100%;" id="dialog">
        <div class="inline">
            <div id="dialogMessage"></div>
        </div>

    </div>

</div>