verschachtelte divs mit z-index

[goldfisch]

hallo
ich habe einen header (div) - darin ist ein bild
ich habe einen container (div) - darin ist ein div sidebar1 mit der navi und ein div content mit einer tabelle und wieder ein div sidebar2.
das ganze ist im browser schön beweglich, wenn er grösser oder kleiner wird.
(ist das grundlayout von dreamweavercs5 mit 3 spalten fixiert mit kopf- und fusszeile)

jetzt habe ich einen sehr grossen text (am besten im einem div) der über dem bild im header beginnt und über die tabelle zu liegen kommt (also senkrecht runterhängt). jetzt sollte aber der text in dem div hinter der tabelle sein und nicht davor und das ganze sollte bei änderung der browsergrösse trotzdem noch beweglich sein.
hab es mit z-index versucht, das funzt aber nur mit apDivs und die sind absolut. sobald ich die position auf relative stelle, wird der z-index ignoriert (der text ist über der tabelle) und das ganze wird total verschoben... ich hab schon tausend varianten probiert - es klappt einfach nicht. hat mir jemand einen tipp, wie ich das am besten anstelle?
es scheint mit dem z-index ein konflikt mit der position absolut oder relativ zu geben....

hab jetzt schon 2 tage rumprobiert - ich krieg es nicht hin - kann aber nicht glauben, dass das nicht gehen soll...... ein bild, wie es sein sollte liegt bei
kann mir jemand helfen?
danke und gruss
goldfisch

[Azra]

Damit sich ein absolut positionierter Container an das Layout hält, muss das Elternelement in dem dieser liegt relativ positioniert werden. Mit einer relativen Positionierung gehört ein Element noch immer zum Fluß der Webseite - ändert man dies in absolut, setzt es sich an die Null-Position zurück und überlappt automatisch andere Elemente.

z-index Werte machen erst Sinn wenn mehrere (mindestens 2) vergeben werden. Die Tabelle benötigt also eine relative positionierung (damit z-index greift) und einen höheren Wert als der Container mit der Schrift.

Sollte das nicht helfen benötigen wir den HTML+CSS Code der Einzelseite.

[goldfisch]

hallo
danke für die antwort. ich habe jetzt alles von hand gemacht, damit ich weiss, was warum passiert. ich habe den container-div mit breite und höhe angeben. dann verschachtle ich den head-div, sidebar1-div, den content-div und den sidebar2-div in den container-div. dann mache ich einen inhalts-div, damit ich eine individuelle randfarbe einstellen kann. in diesem ist eine tabelle. jetzt habe ich einen text-div, der unter der tabelle und unter dem sidebar2-div floaten soll. wo setze ich den hin, damit es funktioniert? das problem ist, dass z-index ja nur innerhalb desselben divs funktioniert. sobald ich aber auf relativ umstelle ist die gewünschte überlappung weg. eines ist oben, das andere unterhalb obwohl beide im selben div sind und ihre position auf 0 ist.
ich versteh einfach nicht, was warum wann passiert.

ich hänge mal die dateien an - ist ja schwierig zu erklären, was das problem ist
in version1 ist der text-div schön hinter allem aber er bleibt stehen, da er auf absolut ist
in version2 ist der text-div auf relativ aber er kommt in den vordergrund und der inhalt rutscht runter

irgendwo mache ich einen fehler - aber wo?
danke für die hilfe
goldfisch

[goldfisch]

hier nochmals ein versuch, die dateien anzuhängen
goldfisch

[Azra]

Hallöchen,

ich werde mich morgen früh damit befassen, versprochen.
Vielleicht hilft dir aber eine kleine Zusatzinfo - vielleicht weisst du es aber schon.

Je höher eine Zahl bei z-index ist, desto höher liegt die Ebene.
Das heisst du vergibst der Tabelle z.B. 1 und dem Überlappenden Text 2.
Du kannst es dir so merken wie mit einem Block Papier. Papier Blatt 1 liegt ganz unten - und so weiter

position:absolute; hebt ein Element vom Fluss des Layouts heraus. Wenn du z.B. Text schreibst geht dieser immer weiter herunter - logisch. Würdest du am Ende des Textes ein Bild platzieren und absolut positionieren würde dieses zum Anfang der Webseite zurückspringen und sogar überlappen. Mit position:relative; kannst du auch z-index nutzen, das Element springt aber nicht zurück.

Vielleicht kannst du es nun lösen, ansonsten bis morgen

[goldfisch]

hallo
das mit dem z-index hab ich begriffen. der funktioniert aber ja nur innerhalb desselben elements oder? ich kann nicht z.b. in einem content-div ein div einfügen mit z-index 2 und in einem sidebar-div ein div einfügen mit z-index 1. das würde nicht funktionieren, weil die beiden divs mit z-index nicht im selben ausgangs-div verschachtelt sind - oder?

bei deiner erklärung zu position und überlappung bin ich etwas überfordert, ich kapiers nicht. hab mal ein bild eingefügt, da ist aber nichts umgesprungen. habs wohl falsch gemacht.

ich hoffe auf deine hilfe morgen (resp. heute ;o))
danke und liebe grüsse
goldfisch

[Azra]

Also das mit dem z-index funktioniert ja wie du möchtest, oder?
Wo ist denn nun noch das Problem?
z-index wirkt auf das zugeteilte Element UND, wenn vorhanden, allen Elementen innherhalb dieses Elements. Das hat mit Positionierung nichts zu tun.

Ich habe zwei Dokumente für dich.
Einmal zur Positionierung:
http://simonduda.ch/portfolio/helping/position/

und zu float:
http://simonduda.ch/portfolio/helping/float/
http://simonduda.ch/portfolio/helping/float/float_clearfix.pdf

Die Anleitung hatte ich für meine Kollegen geschrieben, sie gehört aber zur float Hilfeseite.
Vielleicht probierst du erstmal herum und liest dich ein, kopier dir ruhig den Quelltext.

[goldfisch]

hallo
ich hab mir das mit dem float und clear angeschaut.
mein problem scheint zu sein, dass sich die überlappung von divs und die position relativ widersprechen. scheinbar kann man nicht beides haben???
hier ein bild, wie ich es gerne hätte
und eine testdatei, in der nochmals genauer beschrieben ist, was ich will und wie ich es versuche hinzubekommen...
danke für deine hilfe! überigens hats im pdf zu float_clearfix einen hinweis auf ein beispiel - ist das online irgendwie verfügbar? wie heisst denn der link?
gruss goldfisch

grundlage.png (66.13 KiB) 1163-mal betrachtet

[Azra]

Werd das am Wochenende mal umsetzen wie du es möchtest.
Und das Beispiel ist der Link über der PDF

[goldfisch]

ach soooo - alles klar wegen dem link.
danke, dass du dir mein problem genauer anschaust - bin dir echt dankbar!
mir ist drum nicht ganz klar, warum es wegen dem inhalt in einem div mit relativer position, einen anderen runterhaut, obwohl die beiden nicht zusammenhängen - aber du wirst mich aufklären
gruss goldfisch

[goldfisch]

hallo
in der zwischenzeit habe ich glaub rausgefunden, was mein problem war.
es hat mich einige nerven gekostet!

mir war nicht klar, dass der z-index nur mit id funktioniert und nicht auch mit klassen!
danke an alle, die mitgedacht und mitgeholfen haben!
gruss goldfisch