Как передвинуть jquery datepicker с заднего плана вперёд, на модальное диалоговое окно?

Question

[Игорь Винокуров]

В общем, думаю вся суть понятна из вопроса.
В body есть dialog. В dialog есть jquery datepicker. По команде открывается dialog. Datepicker при этом появляется на заднем фоне (на фоне body, как я понимаю). Как сделать так, чтобы datepicker был на одном уровне с dialog?

<dialog id="dialog">
     Текст<br><br>

     <input type="text" id="inputVzDate">

     <script>
           $('#inputVzDate').datepicker();
     </script>
</dialog>

<button id="show-dialog">Show the dialog</button>

Javascript чисто для отображения dialog, и всё.

const dialog = document.getElementById('dialog');

const showBtn = document.getElementById('show-dialog');
showBtn.addEventListener('click', () => 
{
    dialog.showModal();
})

Comments

[Ankhena]

Сделайте песочницу с видимой проблемой на codepen.io
Пока делаете, возможно, разберетесь в чем дело.
Также можно почитать про z-index и контекст наложения, дело, скорее всего, в них.