Relative/Absolute

crazy_chicken

Erfahrenes Mitglied
Moin Zusammen,

in folgendem Beispiel überlappen die nachfolgenden "parent_rel"s das absolute positionierte Element.
Kennt jemand direkt eine Lösung hierfür?
http://jsfiddle.net/tu9x8e6k/

DANKE!
Code:
.parent_rel{
  position:relative;
  z-index:0;
  background:white;
  width:500px;
  height:50px;
  border-bottom:2px #ddd solid;
}
.child_abs{
  position:absolute:
  z-index:1;
  top:0;
  right:0;
  width:100px;
  height:300px;
  background:red;
}


Code:
<div class="parent_rel">
  <div class="child_abs">
 
  </div>
</div>
<div class="parent_rel"></div>
<div class="parent_rel"></div>
 
Hi,
da ich aus deinem Text nicht ganz rauslesen kann was dein Problem jetzt ist. Kann ich dir nicht wirklich weiterhelfen,
aber ich kann dich darauf hinweisen das du einen Fehler in deinem CSS-code hast.
Du hast nach deinem "position: absolute" einen ":" und kein ";". Den selben Fehler hast du auch in deinem JSFiddle Document.

Also wenn du evtl. dein Problem / Frage nochmal erläutern könntest, könnte ich dir weiterhelfen.

Mit freundlichen Grüßen

Sp1r1t
 
Das rote Element wird von den nachfolgenden 2 Elementen überlappt. Ob es die Möglichkeit besteht, dies zu vermeiden.
PS: Fehler angepasst.
 
So funktioniert es, aber frag mich nicht, warum:
http://jsfiddle.net/tu9x8e6k/4/
Muss irgend etwas mit dem Stapel zu tun haben und dass das absolut positionierte kein Kindelement von dem zweiten und dritten .parent_rel ist. Wahrscheinlich kann MrMurphy es erklären.
 
Hi,

jetzt wenn man es sieht ist es klar, Danke dafür :D.

Warum das so ist, ist einfach erklärt: Jedes Objekt orientiert sich am Element eine stufe weite unten. In diesem Fall "parent_rel" am Body tag.
Da dem Body allerdings nichts zugewiesen ist. Kann es sich auch nicht an den Einstellungen Orientieren.

Übrigens es funktioniert auch wenn man dem body einfach "position: static;" zuweist. (Static ist normalerweise die Standardeinstellung).

vielen dank, ich wäre da jetzt wahrscheinlich nicht drauf gekommen.

Mit freundlichen Grüßen

Sp1r1t
 
Zurück