PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : [CSS] Problem mit z-index (überlappung)


Binaermensch
2004-03-16, 17:55:25
Ich hab insgesamt 8 DIVs; davon sind..
- 7 nach normal-flow, und
- 1 mit position:fixed angeordnet

Dieser eine position:fixed-DIV soll NUR den vierten (dh. den mittleren) der normal-flow-DIVs überlappen, von allen anderen DIVs soll er verdeckt werden.

Zu diesem Zweck hab ich folgende style-Angaben notiert:
(Der zu überlappende DIV ist red, der überlappende blau gekennzeichnet)<div class="weiss" style="z-index : 9;" id="obenobenoben"></div>
<div class="schwarz" style="z-index : 9;" id="obenoben"></div>
<div class="weiss" style="z-index : 9;" id="oben"></div>
<div class="schwarz" style="z-index : 1;" id="inhalt"><!--#set var="HAVE_TEMPLATE" value="1" --><!--#include virtual="$DOCUMENT_URI" --></div>
<div class="weiss" style="z-index : 9;" id="unten"></div>
<div class="schwarz" style="z-index : 9;" id="untenunten"></div>
<div class="weiss" style="z-index : 9;" id="untenuntenunten"></div>
<div class="schwarz" style="z-index : 5;" id="navigation">
<a href="3_start.shtml" class="link">start</a>
<a href="4_ich.shtml" class="link">ich</a>
<a href="5_seite.shtml" class="link">über diese seite</a>
<a href="6_gbuch.shtml" class="link">gbuch</a>
<a href="7_e-mail.shtml" class="link">mail</a>
<a href="8_stats.shtml" class="link">stats</a>
</div>Leider funzt das jedoch nicht so wie es soll.. Der "blaue" DIV überlappt ALLE.

Zu begutachten unter: http://maas-neotek.de/maas-neotek/4_ich.shtml.

Binaermensch
2004-03-16, 21:11:20
^


War die Problembeschreibung zu ungenau?

Aqualon
2004-03-16, 21:19:51
Ich seh, wo dein Problem liegt.

Allerdings ist mir bisher auch nicht eingefallen, woran das liegen könnte...

Aqua

Binaermensch
2004-03-16, 22:49:36
k, auch dieses Problem is gelöst..

Der Fehler steckte mal wieder im Detail: z-index gilt nur für POSITIONIERTE Elemente, dh. alle Elemente außer welche mit position:static.
Blöd nur dass position:static die Standardeinstellung is. :freak:

Hab position:relative draus gemacht und es passt..


Jetzt tritt jedoch ein anderes Problem auf:

http://maas-neotek.de/temporaer/maas-neotek.jpeg

Das Hintergrundbild, welches für BODY definiert ist, erstreckt sich über die ganze Seite (respektive den ganzen Viewport).
Ich dachte daher dass sich das BODY-Tag selbst auch mindestens über den gesamten Viewport erstrecken würde.
-> Fehlanzeige, BODY endet mit der roten Linie.


Weis jemand was ich machen kann, um diesen schwarzen Block unten weg zu bekommen? :confused:

CountZero
2004-03-17, 02:10:05
Versuchs mal mit einer Höhenangabe in deiner Navigationszeile, etwa so:

<div class="schwarz" id="navigation" style="z-index : 5; height:400px;">
<a href="3_start.shtml" class="schwarz link">start</a>
<a href="4_ich.shtml" class="schwarz link">ich</a>
<a href="5_seite.shtml" class="schwarz link">über diese seite</a>
<a href="6_gbuch.shtml" class="schwarz link">gbuch</a>
<a href="7_e-mail.shtml" class="schwarz link">mail</a>
<a href="8_stats.shtml" class="schwarz link">stats</a>
</div>



Schwarzer Kasten kommt von dem Menu, was sich ohne höhenangabe auf 100% höhe setzt...

CountZero

Binaermensch
2004-03-17, 07:07:53
Das mit height wird schlecht gehn, da die Länge der Seite vom angezeigten Inhalt abhängt.. Und die NaviLeiste bei längerem Inhalt dann einfach abgeschnitten werden würde.


Bin außerdem grad draufgekommen dass mein Gedankengang überhaupt falsch war;
dieser schwarze Block würde auch angezeigt werden wenn BODY gleich groß wie der Viewport wäre.