Проблема z-індексу вибору дати Jquery

У мене є розділ слайд-шоу, і над цим дівом є поле для вибору дати.

Коли я натискаю поле поля вибору дат, на панелі вибору дат з’являється позаду слайд-шоу div.

І я поставив сценарій як:

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

Тому я не можу змінити z-індекс датчика дат у CSS. Z-індекс датчика дат, який створює сценарій, становить 1, а моє слайд-шоу (також виклик через googleajaxapi) z-індекс - 5. Отже, я думаю, я повинен збільшити z-індекс вибору дат більше, ніж 5. Так є будь-який спосіб її збільшити?

Хтось може мені допомогти?

Помістіть наступний стиль в текстовому елементі «введення»: position: relative; z-index: 100000;.

Div datepicker дістає z-індекс із вхідних даних, але це працює лише в тому випадку, якщо позиція відносна.

Використовуючи цей спосіб, вам не потрібно змінювати будь-який JavaScript від інтерфейсу jQuery.

просто у вашому використанні css ' .ui-datepicker{ z-index: 9999 !important;}' Тут 9999 можна замінити на будь-яке значення шару, яке ви хочете, щоб був доступний ваш датчик. Жоден код не слід коментувати, а також не додавати position:relative;css у вхідні елементи. Оскільки збільшення z-індексу вхідних елементів матиме вплив на всі кнопки типу введення, що може не знадобитися в деяких випадках.

працював на мене

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

Спираючись на марксизм у відповідь, це працювало для мене:

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

Додавши до відповіді Джастіна, якщо ви переживаєте за неохайну розмітку або не хочете, щоб це значення було жорстко закодовано в CSS, ви можете встановити вхід до його відображення. Щось на зразок цього:

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

Зауважте, що ви не можете опустити "position": "relative"правило, оскільки плагін або виглядає в стилі вбудованого для обох правил, або таблиці стилів, але не для обох .

Це dialog("widget")фактичний вибирач дат, який спливе.

Цю проблему я вирішив за допомогою клацання:

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

У мене є діалогове вікно, на якому використовується датчик. Це завжди було приховано. Коли я коригував z-індекс, поле в нижній формі завжди відображалося в діалоговому вікні.

Для вирішення проблеми я використав комбінацію рішень, які бачив.

$('.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  } ); }                    
            });

Попереднє шоу гарантує, що підбирач дат завжди знаходиться на вершині при виборі, але onClose гарантує, що z-індекс поля буде скинутий, щоб він не перекривався на жодному діалоговому вікні, відкритому пізніше з іншим вибором дати.

Дивіться тут: http://forum.jquery.com/topic/z-index-1-datepicker-1-8

У мене є сторінка, на якій дата-панель опинився поверх кнопки стільниць datatables.net. Кнопки таблиць даних мали більш високий z-індекс, ніж окремі кнопки вибору дати. Завдяки відповіді Роні, я зміг вирішити цю проблему, використовуючи позицію: відносна; та z-індекс: 10000. Дякую!

Це сталося зі мною, коли я бракував теми. Переконайтесь, що тема існує або, можливо, перезавантажте її та перезавантажте її на свій сервер.

Ось що вирішило мою проблему:

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

Насправді ви можете ефективно додати свій css, .ui-datepicker{ z-index: 9999 !important;}але ви можете змінити jquery-ui.cssабо jquery-ui.min.cssдодати в кінці класу ui-datepicker z-index: 9999 !important;. обидві речі працюють на мене (вам потрібен лише один ;-))

У мене також була ця проблема, оскільки дата-панель використовує z-індекс введення, я додав наступний css

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

Просто візьміть за правило, яке стосується вашого, або батьківського ідентифікатора, класу, або в моєму випадку діалогового вікна завантаження, використовуючи їх групу введення та контроль форми.

мені довелося

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