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

<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

我使用jQuery的3.1.1。当我在Runsnippet上添加Jquery-3.1.1 cdn时，它不起作用。所以，我对摘录

添加jQuery的1.12.4.js在我的情况下，在第一次完美展示。但其余时间当用户点击文本框它显示像片段输出

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

的问题是，在第一次当用户单击文本框，它是完全显示日期选择器没有任何问题像下面

当我点击文本框外的缪斯并再次尝试点击在分机盒上，它不是完全显示。它的显示如下图所示

这里是关于浏览器的代码，其中显示了日期选择器

<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;">

请给我的解决方案与合适的理由

感谢

来源

2017-04-22 Liam neesan

您可以编写代码在这里的一个片段？ – Nimish

@nimish好吧请保留 –

请勿使用showAnim：“fold”，因为它每次都会产生问题。我已经为datepicker尝试了不同的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>

来源

2017-04-22 15:22:36 Nimish

感谢兄弟。现在工作正常。 –

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

回答

相关问题