z-index - Wechsel bei Div-Containern?

[Rawir]

Ich habe vor, eine Webseite zu schreiben, wo mehrere div-Container aufklapp- und verschiebbar sein sollen. Der jeweils aktive Div-Container (sprich, den, den man gerade mit der Maus bewegt), soll dabei die höchste z-index-Einstellung haben (also praktisch immer oben liegen), und zwar so lange, bis man einen anderen Container anfässt und Container 1 in den Hintergrund wechselt bzw. Container 2 dann oben liegt.

Div-Container zu verschieben schaffe ich schon, aber den Wechsel des z-index kriege ich nicht gebacken. Irgendwie muss ich da für jeden Container einen z-index vorweg angeben (was ja klar ist), diesen aber bei onclick oder active oder so hochsetzen auf z.B. z-index:1000... ich weiß nur nicht wie. Bei einer einfachen Programmierung würde ich wie folgt vorgehen:

if div active {
  set z-index +1000;
}

oder irgendwie so...

 

[DirkEinstedt]

Hi Rawir,

also der Browser sorgt automatisch für eine hierarchische Struktur, d.h. letztere Absolute-Elemente bekommen immer einen höheren Z-Index, als vordere. Klar, denn der Parser geht ja auch chronologisch vor.

<div style="position: absolute; left: 0; top: 0; width: 100px; height: 50px;">1</div>
<div style="position: absolute; left: 0; top: 0; width: 100px; height: 50px;">2</div>

Hier sollte 2 über der 1 stehen. Dazu hier mehr:
https://www.coding-lab.de/tutorials/css/position-und-z-index/

Jetzt möchtest Du ( ich denke mal über Javascript ) realisieren, dass ein Element, dass angeklickt wird, an oberster Stelle angezeigt wird:

<div id="box1" style="position: absolute; top: 50px; left: 50px; width: 300px; height: 100px; background: red;"></div>
<div id="box2" style="position: absolute; width: 300px; height: 100px; background: blue;"></div>

<script>
var box1 = document.getElementById( 'box1' );
var box2 = document.getElementById( 'box2' );

box1 .addEventListener( 'click', function (event)
{
box1.style.zIndex = 1000;
box2.style.zIndex = 1;
});

box2 .addEventListener( 'click', function (event)
{
box2.style.zIndex = 1000;
box1.style.zIndex = 1;
});
</script>

Lass also den Browser die Arbeit für Dich machen, und registrier einfach ein Klick-Event und anschließend die nötigen CSS-Eigenschaften.

Grüße

Dirk