如何使用 css 在我的场景中设置 z-index？

Question

<html>

<head>       
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
</head>
<body>

<div id="DateBetween">
    <div class="col-lg-3">
        Date From
        <input type="text" ID="txtDateFrom" class="form-control" runat="server" />
        <script type="text/ecmascript">
            $(document).ready(function () {
                $("#txtDateFrom").datepicker({
                    dateFormat: "dd-mm-yy",
                    changeYear: true,
                    changeMonth: true,
                    showAnim: "fold",
                    yearRange: "2013:2017"
                });
                $("#txtDateFrom").focus(function () {
                    $("#datepick").datepicker("show");
                });
                $("#txtDateFrom").focus();
            });
        </script>
    </div>
    <div class="col-lg-3">
    Date To
        <input type="text" ID="txtDateTo" class="form-control" runat="server" >
        <script type="text/ecmascript">
        $(document).ready(function () {
            $("#txtDateTo").datepicker({
                dateFormat: "dd-mm-yy",
                changeMonth: true,
                changeYear: true,
                showAnim: "fold",
                yearRange: "2013:2017"
             });
            $("#txtDateTo").focus(function () {
                $("#datepick").datepicker("show");
            });
            $("#txtDateTo").focus();
        });
        </script>
    </div>
 </div>

UPDATE

I am using jquery-3.1.1. when I add Jquery-3.1.1 cdn on Runsnippet, it's not working. So I add jquery-1.12.4.js on Snippet

In my case, at first time it is showing perfectly. But and rest of the time when user click on the text box it showing like snippet output

我有一个日期选择器日历。当用户单击文本框时，将出现日期选择器日历。

The problem is at first time when user click the text box, it's showing datepicker completely without any problem like below

when I click the muse in outside of the text box and again try to click on the ext box, it's not appearing completely. It's showing like below

这是浏览器上为日期选择器显示的代码

<div id="ui-datepicker-div" 
    class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" 
    style="position: absolute; 
           top: 470px; left: 618.25px; 
           z-index: 1; margin: 0px; 
           height: 231.422px; clip: rect(0px 238px 15px 0px); 
           display: block;">

请给出合理的解决方案

谢谢

Answer 1

不要使用 showAnim: "fold" 因为它每次都会产生问题。我为日期选择器尝试了不同的 js，发现此选项存在问题 (showAnim: "fold")。

$(document).ready(function(){

$('#txtDateFrom').datepicker();
$('#txtDateFrom').focus(function(){
    $('#txtDateFrom').datepicker('show');
});
$('#txtDateTo').datepicker();
$('#txtDateTo').focus(function(){
    $('#txtDateTo').datepicker('show');
});
$.datepicker.setDefaults({
  dateFormat: "dd-mm-yy",
  changeMonth: true,
  changeYear: true,                
  yearRange: "2013:2017"       
});

});

.col-lg-3{
  float:left;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>   
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<div id="DateBetween">
    <div class="col-lg-3">
        Date From
        <input type="text" id="txtDateFrom" class="form-control" runat="server" />
        </div>
    <div class="col-lg-3">
    Date To
        <input type="text" id="txtDateTo" class="form-control" runat="server" >       
    </div>
 </div>

如何使用 css 在我的场景中设置 z-index？

How to set z-index in my scenario using css?

html

css

jquery-ui

datepicker

jquery-ui-datepicker