Angular popup calendar question

I have a z-index issue when my angular calendar displays. I iterate over data to display 4 date columns in a html table. I can successfully click on the input text box and display the calendar however the other date input text boxes display over the calendar. I need help with my code. I have two css rules. The first rule is in the outr

tag which allows the calendar to display over the footer on the page. The second rule is placed inside the tag to display the calendar but it does not work. Below is a snippet of my code. Any ideas or suggestions will be most helpful.

css:
#uiDatepickerDiv{z-index:1050!important;}
#overlayCalendar {z-index:-2000!important;}

html code:

Not much for me to wrap my head around, but in this forum people tend to forget to use position before using z-index and you shouldn’t count on inheritance from farther up. How complex are your other selectors?