Div ohne Position im Vordergrund?

Hallo. Ich versuche gerade auf einer Webseite ein div in den Vordergrund zu verschieben. Das Problem bei der ganzen Sache ist:

1. Es hat keine Position. Über den normalen weg des z-index ist also erstmal nichts zu machen.

2. Es liegt etwa folgende Struktur vor:

   Soll oben Liegen Ist eine Js Animation welche über allem liegt aber von manchen Objekten überlappt werden soll

Gibt es dafür eine schon bestehende Lösung?

Danke!

Answer 1

[mastema666]

Wenn das div keine Position (bzw keine feste / absolute, denn irgendeine Position hat es ja zwangsweise) hat, dann gib ihm doch einfach eine, dann funktioniert das mit dem z-index sicherlich auch. Du willst ja bestimmt, dass dieses div an einer bestimmten Stelle zu sehen ist, also kannst du ihm diese Position ja auch fest zuweisen (Wie willst du das auch sonst machen? Bei "keiner" Position dürfte es ja gar nicht sichtbar sein, und dann wäre wiederum die Position sowieso egal^^).

Und wenn es von anderen Objekten wie du sagst "überlappt" werden soll, dann müsstest du diesen Objekten eben einen höheren z-index verpassen.

Comments

[gumpo03]

Das Div enthällt ein img und ist mit Prozentwerten und calc mittig ausgerichtet, je nachdem wie groß das Browserfenster ist, ist es an einer anderen Position..

[gumpo03]

Die Struktur ist übrigens folgende:

<div> //onepage scroll main div

<div> //section div

<div><img></div> //Div welches immer oben liegen soll

</div>

<div></div> //noch mehr sections

</div>

<div></div> //Javascript Animation welche über allem liegt, aber von bestimmten Objekten überlappt werden soll.

PS: dieser Gutefrage Texteditor ist echt schlecht umgesetzt. Jedesmal wenn ich Codebeispiele posten will funktioniert es nicht so wie ich das will..

[mastema666]

@gumpo03

Jo, zum Posten von Code ist das System hier denkbar ungeeignet, am besten immer irgendwo extern posten, z.B. bei pastebin.com

Du sagst ja das div ist mit prozentualen Abständen ausgerichtet, aber das ist ja auch eine Position, also wenn das div halt immer mittig im Browserfenster zu sehen sein soll, dann würde ich das mit "fixed" fest positionieren, so z.B.: https://goo.gl/D4A4fV

Auf diese Art und weise sollte es auch keine Rolle spielen wo im Code sich das div befindet (ich packe sowas z.B. immer ziemlich ans Ende wenn ich Dinge wie kleine Info-Layer oder so zentriert einblenden will, dann verschieben sich dadurch nicht so leicht andere Elemente). Dazu dann eben den z-index benutzen um festzulegen was vor oder hinter diesem div zu sehen sein soll.

[gumpo03]

@mastema666

Ok, nun ist das Problem doch etwas größer als das vielleicht am Anfang angemutet hat. Ich beschreibe mal die Seite etwas genauer:

Ich habe eine Onepage-Scroll Seite. Diese soll immer den gleichen Hintergrund haben, welcher per Javascript generiert wird und durch den Mauszeiger beeinflusbar ist. Da die Javascript Animation sich nicht mehr beeinflussen lässt sobald ich sie hinter die Onepages lege, muss ich sie über die Onepage legen und einzelne Objekte über die Animation heben, damit sie noch gut sichtbar sind und man mit ihnen interagieren kann. Das hat bei all meinen Versuchen aber bisher leider nicht geklappt, was wohl an der Struktur liegt bei der sehr viele Divs übereinander liegen um die Seite zu strukturieren.

Ich baue mal kurz ein Beispiel zusammen um das Problem zu verdeutlichen.

[abbrechen]

Ja, ohne Code werde ich dir auch nicht allzu gut helfen können, aber deine Breakpoints sollten kein Problem sein, deinem Element position: absolute zu geben, damit z-index funktioniert. Man darf natürlich nicht vergessen, dem Elternelement die Position: relative zu geben.