내 시나리오에서 CSS를 사용하여 Z- 색인을 설정하는 방법은 무엇입니까?

<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을 추가, 처음에 완벽하게 보여주고있다. 하지만 나머지 시간에는 스 니펫 출력과 같이 표시되는 텍스트 상자를 클릭 할 때

날짜 선택 달력이 있습니다. 사용자가 텍스트 상자를 클릭하면 날짜 선택 달력이 나타납니다. 사용자가 텍스트 상자를 클릭하면, 내가 텍스트 상자의 외부에있는 뮤즈를 클릭하고 다시 클릭 할 때

아래처럼 아무 문제없이 완벽하게 날짜 선택기 보여주는 것

문제는 처음이다 ext 상자에 완전히 나타나지 않습니다. 그것은

다음

이 날짜 선택을 위해 표시되어 브라우저에서 코드

<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 ok –

showAnim을 사용하지 마십시오 : 매번 문제가 될 수 있으므로 "fold"하십시오. datepicker에 대해 다른 j를 시도했으며이 옵션 (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- 색인을 설정하는 방법은 무엇입니까?

답변

관련 문제