nicht angemeldet
Kombination aus relativer und absoluter positionierung
Hallo,
Wie schaffe ich es, dass sich ein div-container wie ein absolut positionierter verhält, sich aber zu gleich an einen orientierungspunkt richtet?
also:
ein absoluter-div-cont. bezieht sich ja salopp gesagt immer auf top:0px; left:0px und schwebt frei herum;
ein realtive-div-cont. bezieht sich auf das übergeordnete Element und beeinflusst nachfolgende Elemente.
Ich suche nach einer Lösung die es mir ermöglicht beides zu kombinieren.
Also ein relative-div-cont. der frei herum schwebt.
Hoffe man versteht mich!?
Kenny
-
Hallo!
Wie schaffe ich es, dass sich ein div-container wie ein absolut positionierter verhält, sich aber zu gleich an einen orientierungspunkt richtet?
Jedes absolut positionierte Element hat einen "Ursprungspunkt" an dem es (über die Angaben top, bottom, left, right) ausgerichtet ist.
also:
ein absoluter-div-cont. bezieht sich ja salopp gesagt immer auf top:0px; left:0px und schwebt frei herum;Das ist so nicht ganz richtig. '0' ist der jeweilige Default-Wert für diese Angaben, also falls nichts anderes explizit angegeben ist. Und 0,0 ist nicht zwangsläufig immer die linke obere Ecke des Viewports.
ein realtive-div-cont. bezieht sich auf das übergeordnete Element und beeinflusst nachfolgende Elemente.
Relative Positionierung bedeutet, dass ein Element um die angegebenen Werte aus seiner "normalen Position im Elementfluss" versetzt angezeigt/ positioniert wird. Und, wichtigster Unterschied zu absolut positionierten Elementen, es verbleibt im Elementfluss!
Ich suche nach einer Lösung die es mir ermöglicht beides zu kombinieren.
Also ein relative-div-cont. der frei herum schwebt.Hoffe man versteht mich!?
Nein, leider nicht. Die Formulierung "frei herumschwebt" ist für mich greifbar/ verständlich.
Aber um es mal mit Google zu sagen:"Meinst du evt. ein absolut positioniertes Element_in_(also Kindelement)einem relativ positionierten Element?"Siehe auch: <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=position (Positionsart)>
Gruß Gunther
-
Danke für die schnelle Antwort.
Doch leider habe ich folgendes Problem:
Mein Drucker kapiert das nicht!<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>position</title>
<style type="text/css">
body { margin:0; padding:0; height:1500px; }
div { border:1px solid #888; }#a3 { position:absolute; top:22cm; left:200px; width:200px; height:200px;
z-index:3; background-color:#ffa; }
#a4 { position:relative; top:2cm; left:20px; width:70px; height:70px;
z-index:1; background-color:#ff5; }
#a5 { position:absolute; top:20px; right:20px; width:70px; height:70px;
z-index:2; background-color:#dd2; }
#a6 { position:absolute; top:130px; left:-50px; width:190px; height:70px;
z-index:-1; background-color:#fdd; }
</style>
</head><body><div id="a3">a3 absolute
<div id="a4">a4 absolute</div>
<div id="a5">a5 absolute</div>
<div id="a6">a6 absolute</div>
</div></body></html>
-
Hi there,
Mein Drucker kapiert das nicht!
Deinem Drucker sind Deine Positionierungsversuche sowas von egal. Der druckt einfach und stur, was ihm der Browser schickt. Probiers einmal mit alternativen Browsern und wenn's dann acuh noch nicht geht, ist noch irgendwo ein Wurm drin...
-
...Also ich sehe im FF im Querformat nur ein stück von a3 und das relative-div-a4 und sonst nichts. ist das ein bug?
im IE klappts soweit, aber da sehe ich nur ränder und keine farben, aber ich wollte auf den ie verzichten!
kenny
-
Hi!
...Also ich sehe im FF im Querformat nur ein stück von a3 und das relative-div-a4 und sonst nichts. ist das ein bug?
im IE klappts soweit, aber da sehe ich nur ränder und keine farben, aber ich wollte auf den ie verzichten!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html><head><title>position</title> <style type="text/css"> body { margin:0; padding:0; } div { border:1px solid #888; } #a3 { position:absolute; top:2cm; left:200px; width:200px; height:200px; z-index:3; background-color:#ffa; } #a4 { position:relative; top:2cm; left:20px; width:70px; height:70px; z-index:1; background-color:#ff5; } #a5 { position:absolute; top:20px; right:20px; width:70px; height:70px; z-index:2; background-color:#dd2; } #a6 { position:absolute; top:130px; left:-50px; width:190px; height:70px; z-index:-1; background-color:#fdd; } </style> </head><body> <div id="a3">a3 absolute <div id="a4">a4 absolute</div> <div id="a5">a5 absolute</div> <div id="a6">a6 absolute</div> </div> </body></html>Vielleicht probierst du es mal damit.
Also ohne die Height-Angabe für body und bei #a3 für top nur 2cm anstatt von 22cm!Und vielleicht liest du dir auch mal die Tipps für Fragende durch.
Deinen Halbsätzen kann man nämlich nur sehr vage bis gar nicht entnehmen, was du eigentlich erreichen willst und woran es letztendlich scheitert.
Gruß Gunther
-
-
-