nicht angemeldet
absolut positioniertes div in div mit property overflow:scroll
0 0 
Struppi
absolut positioniertes div in div mit property overflow:scroll
Hallo,
wenn ich unten angefügtes HTML im Firefox anschaue, wird das absolut positionierte div (abs) vom rechten gefloateten (rhs) div überblendet. Im IE und Safari siehts aus wie gewünscht (das absolut positionierte div ist in front).
FF version: 2.0.0.16
So wie ich das sehe, liegt es am overflow-property. Gibt es eine Möglichkeit, dies zu umgehen? Hacks? Tricks?
Danke und Gruss,
erwin
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test div</title>
<style type="text/css">
.lhs { float:left; overflow:scroll; height:300px; width:200px; border:solid 1px yellow; }
.rhs { float:left; overflow:scroll; height:300px; width:200px; border:solid 1px green; background-color:#ccc; }
.abs { position:absolute; top:100px; left:100px; width:200px; height:50px; border:solid 1px blue; background-color:orange; }
.clr { clear:both; }
</style>
</head>
<body>
<div class="lhs">
left hand side
<div class="abs"></div>
</div>
<div class="rhs">
right hand side
</div>
<div class="clr"></div>
</body>
</html>
-
wenn ich unten angefügtes HTML im Firefox anschaue, wird das absolut positionierte div (abs) vom rechten gefloateten (rhs) div überblendet. Im IE und Safari siehts aus wie gewünscht (das absolut positionierte div ist in front).
nachdem bisher noch niemand geantwortet hat:
ich hab denie frage nicht wirklich verstanden - warum beschreibst du nicht, was du machen willst und nicht wie es nicht funktioniert?-
nachdem bisher noch niemand geantwortet hat:
ich hab denie frage nicht wirklich verstanden - warum beschreibst du nicht, was du machen willst und nicht wie es nicht funktioniert?Ok, ich versuche das ganze mal etwas verständlicher auszuführen.
Ich habe zwei Divs, die in meinem Layout nebeneinander erscheinen. Dies erreiche ich, indem diese beiden Div's die Eigenschaft "float:left" erhalten. Die beiden Div's haben eine fixe Breite sowie Höhe.Innerhalb dieser beiden Div's kann nun beliebig viel Inhalt vorkommen, u.U. auch mehr, als die Div's hoch sind. Deshalb haben beide Div's die Eigenschaft "overflow:scroll". Damit erreiche ich, dass ein Scrollbalken angezeigt wird.
Soweit so gut, nun zum eigentlich Problem.
Im linken Div habe ich einen eigenen ToolTip welchen ich mittels eines absolut positionierten Div's realisiere. Allerdings habe ich im FF das Problem, dass dieses ToolTip-Div hinter dem rechten Div erscheint, also von diesem überdeckt wird. Dieses verhalten tritt nur im FF auf.
Wenn du meinen Code mal im FF und IE anschaust, wirst du sofort sehen was ich meine.
Was ich nun suche, ist ein Lösungsansatz, wie ich erreichen kann, dass mein ToolTip-Div nicht von einem anderen Div überlagert wird.
Ich hoffe das ist ein bisschen besser verständlich rausgekommen als die erste Variante. Bei Unklarheiten bitte fragen.
Danke und Gruss,
erwin-
Wenn du meinen Code mal im FF und IE anschaust, wirst du sofort sehen was ich meine.
ich bin ein "keine lust" typ, ich hab gerne fertigen code zum anklicken - deinen code in ein file speichern und ausprobieren ist mir zu viel aufwand
Ich hoffe das ist ein bisschen besser verständlich rausgekommen als die erste Variante. Bei Unklarheiten bitte fragen.
jetzt hab ichs verstanden, die css-eigenschaft http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index@title=z-index wird in diesem fall dein freund sein ;)
bitte lies bitte insbesondere die erläuterung durch - das könnte in deinem fall relevant werden, wenn du einen tooltip im anderen bereich anzeigen möchtest
-
jetzt hab ichs verstanden, die css-eigenschaft http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index@title=z-index wird in diesem fall dein freund sein ;)
Besten Dank erst mal für deine Bemühungen. Die CSS-Eigenschaft Z-Index ist mir bekannt und bewirkt in diesem Fall absolut nichts.
ich bin ein "keine lust" typ, ich hab gerne fertigen code zum anklicken - deinen code in ein file speichern und ausprobieren ist mir zu viel aufwand
Wenn du mir wirklich helfen willst, wäre es vieleicht trotzdem nicht das verkehrteste, wenn du meinen Beispielcode kurz anschauen würdest. Den habe ich eigentlich genau aus dem Grund angehängt, weil es nicht gerade simpel ist, die ganze Situation kurz und verständlich zu erläutern..
Es grüsst,
erwin-
Besten Dank erst mal für deine Bemühungen. Die CSS-Eigenschaft Z-Index ist mir bekannt und bewirkt in diesem Fall absolut nichts.
Wenn du mir wirklich helfen willst, wäre es vieleicht trotzdem nicht das verkehrteste, wenn du meinen Beispielcode kurz anschauen würdest.an geschaut hab ich deinen beispielcode, nur ausprobiert habe ich ihn nich ;) - ich meine immer noch, dass dir z-index irgendwie helfen wird, du solltest vor allem beachten, dass sich z-index nur auf positionierte elemente auswirkt und in jedem ast des dokumentenbaums einen eigenen kontext erzeugt höherer z-index heisst nicht automatisch "element liegt" darüber
beispiel (pseudocode)
<div1 z-index 100 />
<div2 z-index 10>
<div3 z-index 200 />
</div>in diesem beispiel liegt div1 über div2 und somit über div3 (da ja div2 bereits über div1 liegt)
<div1 z-index 10 />
<div2 z-index 100>
<div3 z-index 5 />
</div>in diesem beispiel liegt div2 über div1, und div3 über div1 (da schon sein elternelement darüber liegt)
-
an geschaut hab ich deinen beispielcode, nur ausprobiert habe ich ihn nich ;) - ich meine immer noch, dass dir z-index irgendwie helfen wird
kommando zurück - da du mit overflow: scroll arbeitest, können die kindelemente das elternelemente nicht verlassen (wie auch bei overflow: auto oder overflow: hidden
eine möglichkeit wäre aber den tooltip per javascript in das umliegende element zu verschieben (aus dem dom entfernen und weiter oben wieder einfügen) und von dort aus an die richtige position zu bringen - wenn du von rhs die scroll-eigenschaft entfernst, klappts seltsamerweise wieder
-
kommando zurück - da du mit overflow: scroll arbeitest, können die kindelemente das elternelemente nicht verlassen (wie auch bei overflow: auto oder overflow: hidden
Ja so was in der Art hab ich mir gedacht, trotzdem finde ich das Verhalten irgendwie komisch. Solange im angrenzenden Div (rhs) kein content ist bzw. keine BG-Color definiert ist, wird das absolut positionierte Div (abs) trotzdem angezeigt..
Ist das ("bei overflow kann Elternelement nicht verlassen werden") irgendwo so definiert und der IE und Safari interpretieren das falsch und nur FF ist richtig? Absolut positionierte Elementen richten sich ja nach dem nächsten Elternelement welches nicht "position:static" hat d.h. in meinem Fall body aus.eine möglichkeit wäre aber den tooltip per javascript in das umliegende element zu verschieben (aus dem dom entfernen und weiter oben wieder einfügen) und von dort aus an die richtige position zu bringen - wenn du von rhs die scroll-eigenschaft entfernst, klappts seltsamerweise wieder
Hab ich im moment so implementiert, allerdings gibt es da auch wider gewisse unschönheiten bei partiellen Updates. Da müsste ich quasi vor dem Asynchronen Request den Tooltip wieder an die alte Position zurück verschieben usw. das würde zwar alles gehen, finde ich aber ein ziemliches gebastel und suche deshalb nach einer saubern lösung..
Die "overflow:scroll"-Eigenschaft von rhs kann leider nicht entfernt werden. Wieso es dann aber funktionieren würde, ist mir ein Rätsel..Danke und Gruss,
erwin
-
-
-
-
-
-
-
FF version: 2.0.0.16
So wie ich das sehe, liegt es am overflow-property. Gibt es eine Möglichkeit, dies zu umgehen? Hacks? Tricks?
Ich hab mal ein bisschen gesucht und noch mehr Bugs gefunden.
Mach mal ein Textinputfeld in das positionierte Element.
Mach den Inhalt des linken Feldes Scrollbar und schau dir das im Opera an.
Oder setzt mal ein zweites relative positioniertes Element darunter und dann scroll mal - jeder der drei Browser macht es anders.Du scheinst ein problematische Sache anzuwenden, overflow und position führen zu seltsamen und unerwarteten Ergebnissen. Leider kann ich dir aber auch keine Lösung sagen.
und für suit zum testen: http://selfhtml.jstruebig.de/overflow-position.html
Struppi.