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
...

.
.

[Gernot Back]

Hallo Cordess1423,

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.

Select-Boxen sind ein spezielles Problem im IE die scheinen durch alle Ebenen unabhängig vom Z-Index durch, es sei denn man überdeckt sie mit einem IFRAME-Element (ob es auch im IE7 noch dieses üblen Tricks bedarf, bin ich jetzt zu faul auszutesten)

http://forum.de.selfhtml.org/archiv/2006/5/t130145/#m841481

<div style=" position:absolute; /*...*/  z-index:2000; /*...*/ ">

In aller Regel reicht ja wohl ein deutlich niedriger Z-Index, oder hast du hier wirklich 1999 Schichten drunter liegen?

Gruß Gernot

[Kalle_B]

die Beschreibung deiines Problems ist für mich unklar.

Du kannst mehrere div position:absolute hintereinander im Code definieren, der letzte liegt oben.

Sofern du keinen Hintergrund definierst, scheinen die darunterliegenden Elemente durch.

Wenn du ein anderes als das letzte Element oben haben willst, musst du dem einen grösseren z-index geben. Also z.B. 2 und die anderen haben 1.

Kalle