Vấn đề z-index bộ chọn ngày jquery

Tôi có một div trình chiếu và tôi có một trường datepicker phía trên div đó.

Khi tôi nhấp vào trường datepicker, bảng datepicker hiển thị phía sau div trình chiếu.

Và tôi đã đặt kịch bản là:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js

Vì vậy, tôi không thể thay đổi chỉ số z của datepicker trong CSS. Chỉ số z của trình chọn ngày mà tập lệnh đang tạo là 1 và div trình chiếu của tôi (còn gọi là googleajaxapi) z-index là 5. Vì vậy, tôi đoán tôi phải tăng chỉ mục z của trình chọn ngày lớn hơn 5. Vậy có bất kỳ cách nào để tăng nó?

Ai đó có thể giúp tôi?

Đặt phong cách sau vào yếu tố văn bản 'đầu vào': position: relative; z-index: 100000;.

Bộ chọn ngày div lấy chỉ số z từ đầu vào, nhưng điều này chỉ hoạt động nếu vị trí là tương đối.

Bằng cách này, bạn không phải sửa đổi bất kỳ javascript nào từ giao diện người dùng jQuery.

đơn giản trong việc sử dụng css của bạn ' .ui-datepicker{ z-index: 9999 !important;}' Tại đây 9999 có thể được thay thế thành bất kỳ giá trị lớp nào bạn muốn có sẵn bộ chọn ngày của mình. Không có bất kỳ mã nào được nhận xét cũng như thêm ' position:relative;' css trên các phần tử đầu vào. Bởi vì việc tăng chỉ số z của các phần tử đầu vào sẽ có hiệu lực trên tất cả các nút loại đầu vào, điều này có thể không cần thiết đối với một số trường hợp.

đã làm cho tôi

.hasDatepicker {
    position: relative;
    z-index: 9999;
}

Dựa trên câu trả lời markyzm, điều này phù hợp với tôi:

$('input').datepicker({
    beforeShow:function(input) {
        $(input).css({
            "position": "relative",
            "z-index": 999999
        });
    }
});

Thêm vào câu trả lời của Justin, nếu bạn lo lắng về việc đánh dấu không gọn gàng hoặc bạn không muốn giá trị này được mã hóa cứng trong CSS, bạn có thể đặt đầu vào trước khi nó được hiển thị. Một cái gì đó như thế này:

$('input').datepicker({
    beforeShow:function(input){
        $(input).dialog("widget").css({
            "position": "relative",
            "z-index": 20
        });
    }
});

Lưu ý rằng bạn không thể bỏ qua "position": "relative"quy tắc, vì plugin trông theo kiểu nội tuyến cho cả quy tắc hoặc biểu định kiểu, nhưng không phải cả hai .

Đây dialog("widget")là công cụ chọn ngày thực tế bật lên.

Tôi đã gặp sự cố này, tôi đã giải quyết bằng cách sử dụng khi nhấp vào:

var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
        $('.datepicker').css("z-index", "999999999");
}).data('datepicker');

Tôi có một hộp thoại sử dụng bộ chọn ngày trên đó. Nó luôn luôn được che giấu. Khi tôi điều chỉnh chỉ số z, trường ở biểu mẫu bên dưới luôn hiển thị trên hộp thoại.

Tôi đã sử dụng kết hợp các giải pháp mà tôi đã thấy để giải quyết vấn đề.

$('.ui-datepicker', $form).datepicker({
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: "yy-M-dd",
                beforeShow: function (input) {
                    $(input).css({
                        "position": "relative",
                        "z-index": 999999
                    });
                },
                onClose: function () { $('.ui-datepicker').css({ 'z-index': 0  } ); }                    
            });

Chương trình trước đảm bảo rằng trình chọn ngày luôn ở trên cùng khi được chọn, nhưng onClose đảm bảo rằng chỉ mục z của trường được đặt lại để nó không trùng lặp trên bất kỳ hộp thoại nào được mở sau này bằng một trình chọn ngày khác.

Xem tại đây: http://forum.jquery.com/topic/z-index-1-datepicker-1-8

Tôi có một trang nơi công cụ chọn ngày ở trên cùng của nút công cụ bảng datatables.net. Các nút dữ liệu có chỉ số z cao hơn các nút ngày của trình chọn ngày riêng lẻ. Nhờ câu trả lời của Ronye, ​​tôi đã có thể giải quyết vấn đề này bằng cách sử dụng vị trí: tương đối; và z-index: 10000. Cảm ơn!

Điều này đã xảy ra với tôi khi tôi thiếu chủ đề. Đảm bảo rằng chủ đề tồn tại hoặc có thể cung cấp lại chủ đề và tải lại chủ đề đó lên máy chủ của bạn.

Đó là những gì đã giải quyết vấn đề của tôi:

 $( document ).ready(function() {   
    $('#datepickerid').datepicker({
     zIndexOffset: 1040 #or any number you want
     });
});

Trên thực tế, bạn có thể thêm vào css của mình một cách hiệu quả .ui-datepicker{ z-index: 9999 !important;}nhưng bạn có thể sửa đổi jquery-ui.csshoặc jquery-ui.min.cssthêm vào cuối lớp ui-datepicker z-index: 9999 !important;. cả hai thứ đều phù hợp với tôi (Bạn chỉ cần một cái ;-))

Tôi cũng gặp sự cố này, vì trình chọn ngày sử dụng chỉ mục z của đầu vào, tôi đã thêm css sau

#dialogID input,.modal-dialog input, .modal-dialog .input-group .form-control{
  z-index:inherit;
}

Chỉ cần lấy quy tắc áp dụng cho của bạn, theo id cha, lớp hoặc trong trường hợp của tôi là hộp thoại khởi động, sử dụng nhóm đầu vào và điều khiển biểu mẫu của chúng.

tôi phải

.datepicker.dropdown-menu {
    position: relative;
    z-index: 9999 !important;
}