如何使用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？

回答

相關問題