position:absolute position:relative

[Cordess1423]

Ich habe folgendes Problem:
Ich habe auf einer Seite zwei Elemente mit div-tags(und natürlich css) positioniert.
Das eine besitzt die Styleeigenschaft position:absolute und das andere position:relative.

Früher nahm ich an, wenn ich für ein Element einen z-index grösser 0 angebe, daß es sich dann vor andere Elemente schiebt. Das scheint aber wohl nicht so zu sein.
Mein Ziel ist es einen Weg zu finden, wie das Element mit der Eigenschaft position:absolute über das andere Element gelegt werden kann.
Habe eine simples beispiel zusammengestrickt. In diesem Beispiel befinden sich zwei Selectelemente und ein Inputelement.Das eine Selectelement ist unsichtbar(das ist mit ´der Eigenschaft position:absolute). Sobald man auf den Knopf drückt(das Bild oder auch das fehlende bild;) )soll es Sichtbar werden und sich über die andere Selectbox legen.Habe noch keinen weg gefunden...meno
Habe es mit z-index probiert und anderen spielereien...ach noch etwas...der grund warum die Elemente diese Eigenschaft besitzen sollen: mit relative wird Platz reserviert, das soll es aber nicht. Es soll wie eine zweite schicht drüber. Das andere muss jedoch das relative behalten da es eine grössere Seite wird die ich nicht verändern soll. (Ihr seht es wahrscheinlich schon...es wird eine selbstgebastelte selectbox).
Hier der Code....wenn mir irgendwer helfen kann wäre ich superglücklich. Es frustriert nämlich langsam.

.
.

<div>

<div style="position:absolute; top:30px; left:10px;">
<div nowrap>
<input id="textfeld_a" type="text" size="15" maxlength="30" value="irgendwasss">
<img src="/mn/dropdown.jpg" style="display:inline;" alt="test" onclick="loadallids__a()">
</div>
<div style=" position:absolute; display:block; visibility:hidden; z-index:2000; width:24px; color: white;">
<select name="pp_param" id="mylist_a"  size="10" >
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
</select>
</div>

<script type="text/javascript">

function loadallids__a()
{
var select=document.getElementById("mylist_a");
var eye=select.style.visibility;

if(eye=="hidden" )
{
select.style.visibility="visible";
select.focus();
}

if(!(eye=="visible" || eye=="hidden"))
{
select.style.visibility="visible";
select.focus();
}

if(eye=="visible")
{
select.style.visibility="hidden";
}

}

</script>
</div>
</div>

<div style="position:relative;">
<SELECT NAME="blub" SIZE="6">
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
<option>teeext</option>
</SELECT>
</div>

Teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext
Teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext
...

.
.