Problems with position:absolute jquery plugins and z-index

I’ve added two input fields for a custom search function to my page. The first field is an autocomplete plugin, the second one a calendar. Both plugins do create a div with ‘position:absolute’ on the fly.

Now I have z-index problems in two situations and increasing the z-index of these plugin wrappers doesn’t help:

1. First I added a “color section” using the “Avia Layout Architect” and inserted both input fields to it. Below the color section there are many 1/3 boxes containing simple text boxes and buttons simulating the search output. When I click on the input fields, it looks like this:

I’ve tracked down the problem to the CSS ‘unit’ class:

.unit, .units {
  float: left;
  display: inline;
  margin-left: 50px;
  position: relative;
  z-index: 1;
  min-height: 1px;
}

When I remove the ‘position: relative’ my problem is solved, but I think this will cause problems somewhere else. Is there another solution for this?

2. Situation:

I want to have those two input boxes at the front page on top of the slider, so I’ve added it to the text caption of an aria slider image, but the text caption box has some overflow scroll logic and my position:absolute boxes are truncated:

Is there a way to open up something, that is bigger than the slider caption box and lays above all other content?

Thanks!