Jquery DatePicker shows up behind other regular page elements

Question

I am having a trouble with a date picker implemented by someone else. I tried to implement the code on my website but it's not working. Below is the Javascript DatePicker

// init datepicker
function initDatepicker(){
    jQuery('.with-datepicker').each(function(){
        var hold = jQuery(this);
        var input = hold.find('input:text');
        var opener = hold.find('.btn');
        input.datepicker({
            showOtherMonths: true
        })
        opener.bind('click', function(e){
            input.focus();
            e.preventDefault();
        })
    })
}

So my issue is 2 fold.
A) I don't understand what input.focus() is really doing other than calling focus on jQuery(this).find('input:text').focus();
B) The datepicker with the class of ".with-datepicker" shows up behind other elements on the page, and when I try to click on the datepicker it goes away and does not select a date.

A little more information to give you is I am using this with Contact Form 7 which has a text box you can click on to activate the date picker. That part seems to work ok. The datepicker literally shows up right below the input box that displays "pick a date". The problem is the datepicker class is behind other elements such as radio buttons.

I also tried doing this after input.focus();

$(this).parent().css('position', 'relative');
$(this).parent().css('z-index', 3000);

Below is a link to how it looks on the page:

Answer 1

I solve that just with css

.ui-datepicker { z-index: 10000 !important; }

Answer 2

Make sure your DatePicker has position: absolute;

And wrapper should have position: relative;, other child elements of it should Not have relative positioning.

Your problem is in finding the correct parent, and giving correct z-index to the Active DatePicker.

Answer 3

Give position:absolute to the datepicker element and position:relative to the parent element of datepicker element