Relative/Absolute


crazy_chicken

Erfahrenes Mitglied
#1
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>
 
#2
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
 
#5
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
 

Neue Beiträge