Positionierung von HTML Elementen mit z-index

[LuMpY-Toiletnose]

Guten Morgen!

Ich habe ein Problem, dass ich selber nicht in den Griff bekomme und auch nicht mit der Suchfunktion im Forum gefunden habe!

Es geht darum, mit einem Klick eine Tabelle oder ähnliches sichtbar zu machen.
Soweit so gut, damit habe ich kein Problem, wurde auch schon oft genug im Forum durchgekaut!

Das Problem ist, dass wenn ich in den Style Tags der anzuzeigenden Tabelle bzw <span>-Objekts

position:relative

benutze, da die Tabelle ein Untermenü in der Navi sein soll, und sich mit ihren Koordiaten an dem auslösenden Link orientieren soll, da sich sonst bei einer anderen Auflösung alles verschiebt.

Lange Rede kurzer Sinn...Die unsichtbare Tabelle verschiebt einfach das komplette Layout. Sie ist zwar unsichtbar, verdrängt die anderen Elemente aber trotzdem.

Jetzt hat Javascript ja die Tolle Z-index Möglichkeit um sowas zu machen, ich bekomme das allerdings einfach nicht hin. Sie wird einfach so ignoriert als gäbe es sie nicht

Hier mein Beispiel:

<style>
#Navi_1 {
position:relative;
top:250px;
left:205px;
visibility:hidden;
}
</style>

<table>
<tr>
.
.
.
<img src="blababla" onclick="menütoggle">
<span id="Navi_1">
Untermenü blablablablabla
</span>
.
.
.
Restlicher Html-Text

So in etwa könnte man sich das vorstellen
Um auf die Funktion "menütoggle" einzugehen: Sie setzt einfach "visibility von hidden auf visible" und andersrum.

Mir ist klar, dass sich das verschiebt, da es ja mitten im HTML Text ist, wenn ich es aber vor oder nach die Tabelle setzte, orientiert es sich nicht mehr an dem Link.

Kann mir jemand helfen?

Danke im Vorraus! Ich hoffe ihr versteht mein Problem und ich hoffe ich habe kein Thread zu dem Thema übersehen!

Tschüssie

 

[con-f-use]

Nimm "display:none" statt "visibility:hidden" und ändere das auch im JS als style.display="none" bzw. "block" statt style.visibility="hidden" bzw. "visible". Z-Indizes bringen dir nur bei absoluten Positionsangaben etwas.

 

[LuMpY-Toiletnose]

habs mit display:none/block schon probiert!

Mach überhaupt keinen Unterschied! :/

***edit***

Ok es macht doch einen Unterschied. Und zwar den, dass wenn display auf "hidden" steht, das design nicht verschoben wird.
Änder ich aber display auf "block" dann verschiebt sich wieder alles.

Gibt es keine Möglichkeit das zu unterbinden ohne die position auf absolute zu setzten?

 

[con-f-use]

Kann nicht sein. Poste mal bitte einen Link zu der Seite!

 

[LuMpY-Toiletnose]

Ok einen Moment

**edit**


Hier die URL:

LINK

 

[con-f-use]

Versuch mal statt "block" im Javascript "inline" zu nehmen. Wenn das nicht klappt versuchs mal mit "" (also einem leeren String) statt "block" außerdem solltest du auch den Element mit der id="test" einen entsprechenden z-index geben.

 

[LuMpY-Toiletnose]

Funktioniert leider auch nicht!

Hast du nicht vorhin geschrieben das z-Index nur bei position:absolute etwas bringt?

Der höchste Z-Index wird ganz oben angezeigt oder?