mehrere DIV-Elemente gleich positionieren, jedoch relativ

[Patrick]

Ich möchte 3 DIV-Tags relativ-positionieren. Die 3 DIV-Elemente sollten jedoch alle übereinander liegen (also die gleiche Position erhalten).

Wenn ich sie absolut positioniere funktioniert's natürlich (aber dann sind sie eben leider nicht mehr relativ).

Wenn ich sie relativ positioniere beginnt das eine DIV-Element da, wo's andere aufgehört hat (mit anderen Worten, sie werden untereinander/nebeneinander angezeigt).

Mit einem Javasscript könnte ich es zwar lösen, hoffe aber es gibt eine andere Möglichkeit. Die DIV-Elemente sind innerhalb eines TD Zellen-Tags. Kann ich die DIV-Elemente dazu zwingen sich absolut zum Parent-Tag (TD Zelle) zu verhalten, anstatt absolut zu den Page-Null-Koordinaten? Oder hat jemand eine andere Idee?

Danke und viele Grüsse
Patrick

[Ashura]

Hallo Patrick.

Ich möchte 3 DIV-Tags relativ-positionieren. Die 3 DIV-Elemente sollten jedoch alle übereinander liegen (also die gleiche Position erhalten).

„Übereinander“ in Bezug auf die z-Achse?

Wenn ich sie relativ positioniere beginnt das eine DIV-Element da, wo's andere aufgehört hat (mit anderen Worten, sie werden untereinander/nebeneinander angezeigt).

Nein. Relativ positionierte Elemente werden, wie der Name schon sagt, relativ zu ihrer ursprünglichen Position im Dokument ausgerichtet.

Die DIV-Elemente sind innerhalb eines TD Zellen-Tags.

Ich bezweifle, dass dies strukturell sinnvoll ist.

Kann ich die DIV-Elemente dazu zwingen sich absolut zum Parent-Tag (TD Zelle) zu verhalten, anstatt absolut zu den Page-Null-Koordinaten? Oder hat jemand eine andere Idee?

Das entsprechende <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=Kapitel in SELFHTML> hilft dir weiter. (Genau lesen!)

Einen schönen Sonntag noch.

Gruß, Ashura

[Alex]

Hallo Ihr

Genau dieses Problem habe ich auch - allerdings habe ich damals aufgegeben.
Ich glaube, die Hauptfrage dabei ist wirklich die absolute Positionierung am Parent-Tag, das selber relativ positioniert ist.

Ob das sinnvoll ist? Oh ja! Wenn ich Seiten mache, die sich z.B. am Bildschirm des Users orientieren (und das finde ich absolut den besten Weg), kann ich niemals wissen, z.B. welche y-Position eine Grafik mitten auf der Seite hat, wenn darüber (in y-Position) z.B. Text geschrieben steht, der bei jedem User anders umgebrochen wird, etc.
Sie schwebt dann entweder irgendwo über oder unter dem Text, jedoch niemals genau an der Stelle, wo man sie haben will - denn dazu müsste man sie relativ positionieren.
Will man nun ein zweites Element (z.B. eine dynamische Beschriftung) darüberlegen (in z-Position) geht das schlichtweg nicht ... und das ist doch doof - es muss doch eine Möglichkeit dafür geben.

<http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=Kapitel in SELFHTML> hilft da trotz genauen Lesens nicht weiter.

[Ashura]

Hallo Alex.

Ob das sinnvoll ist? Oh ja! Wenn ich Seiten mache, die sich z.B. am Bildschirm des Users orientieren (und das finde ich absolut den besten Weg),

Wenn sich eine Seite am Bildschirm des Users orientiert, ist sie in meinen Augen Müll. Der Bildschirm ist absolut, gänzlich, vollkommen, in allen Belangen und aus jeder Sicht irrelevant.

kann ich niemals wissen, z.B. welche y-Position eine Grafik mitten auf der Seite hat, wenn darüber (in y-Position) z.B. Text geschrieben steht, der bei jedem User anders umgebrochen wird, etc.

Doch. Die Grafik befindet sich immer unter dem Text. Wo ist das Problem?

Sie schwebt dann entweder irgendwo über oder unter dem Text, jedoch niemals genau an der Stelle, wo man sie haben will - denn dazu müsste man sie relativ positionieren.

Mir schwandt, dass du zu viel mit absoluter Positionierung hantierst.
Zitat Orlando: „Absolute Positionierung ist für wenig Fortgeschrittene absolut nicht geeignet (vermutlich kommt daher die Bezeichnung ;-)).“

Will man nun ein zweites Element (z.B. eine dynamische Beschriftung) darüberlegen (in z-Position) geht das schlichtweg nicht ... und das ist doch doof - es muss doch eine Möglichkeit dafür geben.

Es geht sehr gut, Lesen hilft, wie ich schon sagte.

<http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=Kapitel in SELFHTML> hilft da trotz genauen Lesens nicht weiter.

Und dennoch schreibst du folgendes?

Ich glaube, die Hauptfrage dabei ist wirklich die absolute Positionierung am Parent-Tag, das selber relativ positioniert ist.

Einen schönen Sonntag noch.

Gruß, Ashura

[Alex]

Hi Ashura

Wenn sich eine Seite am Bildschirm des Users orientiert, ist sie in meinen Augen Müll. Der Bildschirm ist absolut, gänzlich, vollkommen, in allen Belangen und aus jeder Sicht irrelevant.

Vielleicht haben wir uns dabei falsch verstanden: Wenn ich eine Angabe wie width:100% mache, ist das die Orientierung am Bildschirm des Benutzers.
Mich nicht am Bildschirm des Benutzers zu orientieren hieße
width:1024px;height:6584px;font-size:14px;line-height:28px;
Mit solchen absoluten Positionierungen arbeite ich nach Möglichkeit nie. Sie wären aber nach meinem Wissensstand die einzige Methode einer Positionierung von z.B. drei in z-Position überlappender DIVs UNTER dem Text z.B.
#box1 { position:absolute; top:6585px; left:10px; width:150px; height:150px; z-index:1; }
#box2 { position:absolute; top:6585px; left:10px; width:100px; height:100px; z-index:2; }
#box3 { position:absolute; top:6585px; left:10px; width:150px; height:150px; z-index:3; }

Wenn ich den Text vorher nicht absolut positioniert habe, würden die Boxen je nach Bildschirm des Users irgendwo (in z-Position) über dem Text schweben.

Der Versuch
<DIV style="position:relative, ..."
langer langer Text
</DIV>

<DIV id="EINS parent-div">
   <DIV id="ZWEI soll in z-Position genau über EINS drüberligen" style="position:absolute;top:0;left:0;...">
             ... Inhalt ...
   </DIV>
</DIV>
scheitert aber mangels Ausrichtung am Parent-Tag.

Du weißt sicher, wie man sowas löst, oder?

Alex

[Ashura]

Hallo Alex.

Wenn sich eine Seite am Bildschirm des Users orientiert, […]

Bitte belasse die Zitatzeichen, wie sie sind. Andernfalls kann man nicht mehr sofort erkennen, was Zitat und was Kommentar ist. Danke.

Vielleicht haben wir uns dabei falsch verstanden: Wenn ich eine Angabe wie width:100% mache, ist das die Orientierung am Bildschirm des Benutzers.

Nein, auch dies stimmt nicht. In diesem Falle würde z. B. ein solchermaßen formatiertes body-Element bei mir grundsätzlich über den Browserrand hinaus ragen. Könnte es sein, dass du nicht eigentlich den zur Verfügung stehenden Platz im Browserfenster, alias Viewport, meinst?

Mich nicht am Bildschirm des Benutzers zu orientieren hieße
width:1024px;height:6584px;font-size:14px;line-height:28px;

Solche Angaben wiederum wären bildschirmorientiert. (Man beachte das „1024“, was eine gängige horizontale Auflösung darstellt.)

Mit solchen absoluten Positionierungen arbeite ich nach Möglichkeit nie.

Das freut mich zu lesen.

Sie wären aber nach meinem Wissensstand die einzige Methode einer Positionierung von z.B. drei in z-Position überlappender DIVs UNTER dem Text z.B.

Bitte, bitte, definiere „unter“. Es gibt aus meiner Sicht zwei „unter“: eines in Bezug auf die y-Achse und eines in Bezug auf die z-Achse. (Auch wenn sich dein Ansinnen aus dem Folgenden ergibt, kann eine solche Zusatzbemerkung Missverständnisse vorbeugen.)

#box1 { position:absolute; top:6585px; left:10px; width:150px; height:150px; z-index:1; }

#box2 { position:absolute; top:6585px; left:10px; width:100px; height:100px; z-index:2; }
#box3 { position:absolute; top:6585px; left:10px; width:150px; height:150px; z-index:3; }

>   
> Wenn ich den Text vorher nicht absolut positioniert habe, würden die Boxen je nach Bildschirm des Users irgendwo (in z-Position) über dem Text schweben.  
  
Laut deinem Code würden sie wohl eher einige tausende Pixel südlich meines Browsers angesiedelt.  
  

> <DIV id="EINS parent-div">  
>    <DIV id="ZWEI soll in z-Position genau über EINS drüberligen" style="position:absolute;top:0;left:0;...">  
>              ... Inhalt ...  
>    </DIV>  
> </DIV>  
> scheitert aber mangels Ausrichtung am Parent-Tag.  
>   
> Du weißt sicher, wie man sowas löst, oder?  
  
Verpasse dem umspannenden div-Element als erstes eine <http://de.selfhtml.org/html/referenz/attribute.htm#id#id_idref_name@title=gültige ID> und daraufhin ein position:relative. Damit bildet dieses div-Element die Orientierungsgrundlage für sämtliche in ihm absolut ausgerichteten Elemente. (Was, wie ich schon schrieb, auch im betreffenden <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=SELFHTML-Kapitel> nachzulesen ist.)  
  
  
Einen schönen Sonntag noch.  
  
Gruß, Ashura  

-- 
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|  
[<mathbr:del.icio.us/>](http://del.icio.us/mathbr) [<mathbr:w00t/>](http://w00t.noctus.net)

[Alex]

Hi Ashura

Zunächst einmal: Du hast vollkommen Recht:

und daraufhin ein position:relative. Damit bildet dieses div-Element die Orientierungsgrundlage für sämtliche in ihm absolut ausgerichteten Elemente.

Ich dachte, da postition:relative sozusagen die default Einstellung jedes Elements ist, wäre es nicht nocheinmal nötig, das extra anzugeben und Du hast wieder Recht, ich meinte nämlich das zugehörige Kapitel in und auswendig zu kennen, gerade weil ich so nach einer Lösung gesucht habe, so kann man sich täuschen...

Jetzt habe ich aber ein anderes Problem: Ich möchte nämlich, dass die eingeschlossenen in z-Position übereinanderliegenden DIVs auch noch zentriert sind
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML><HEAD></HEAD><BODY>

<div id="DAVOR" style="text-align:center;">
<H1>DAVOR</H1>
text text text text text text text text text text text text text text text text <br>
text text text text text text text text text text text text text text text text <br>
text text text text text text text text text text text text text text text text <br>
<br>
</div>
<div id="EINS" style="position:relative;width:100%;height:50px;border:solid 5px #f00;">
     <div id="ZWEI" style="position:absolute;top:-5px;width:50%;border:solid 5px #0f0;margin:0 auto 0 auto;">
        Dieser DIV sollte zentriert und deckungsgleich mit dem anderen sein
     </div>
     <div id="ZWEI" style="position:absolute;top:-5px;width:50%;border:solid 5px #0f0;margin:0 auto 0 auto;">
        Dieser DIV sollte zentriert und deckungsgleich mit dem anderen sein
     </div>
</div>
<div id="DANACH" style="text-align:center;">
<H1>DANACH</H1>
text text text text text text text text text text text text text text text text <br>
text text text text text text text text text text text text text text text text <br>
text text text text text text text text text text text text text text text text <br>
</div>
</BODY></HTML>

Hast Du auch dafür eine Lösung?

Ebenfalls einen schönen Sonntag

Alex

[Detlef G.]

Hallo Alex

Ich dachte, da postition:relative sozusagen die default Einstellung jedes Elements ist,

Nein, die Normaleinstellung ist static, wie du dort unter Erläuterung auch
nachlesen kannst.

Auf Wiederlesen
Detlef

[Alex]

Also Leute

Jetzt habt ihr mir's aber wirklich gegeben...
Ja, ja es steht alles im Kapitel...

Ich mach mal lieber ein neues Posting und dann könnt ihr mir auch noch sagen, in welchem Kapitel das mit der Zentrierung steht...

CU Alex

[Detlef G.]

Hallo Alex

Jetzt habe ich aber ein anderes Problem: Ich möchte nämlich, dass die eingeschlossenen in z-Position übereinanderliegenden DIVs auch noch zentriert sind

<div id="ZWEI" style="position:absolute;top:-5px;width:50%;border:solid 5px #0f0;margin:0 auto 0 auto;">

Du gibst nicht an, wo es horizontal positioniert werden soll.

Auf Wiederlesen
Detlef

[Alex]

Hallo Detlef

<div id="ZWEI" style="position:absolute;top:-5px;width:50%;border:solid 5px #0f0;margin:0 auto 0 auto;">

Du gibst nicht an, wo es horizontal positioniert werden soll.

margin:0 auto 0 auto; <-- wie gebe ich denn sonst eine horizontale Positionierung an?

Mit left:0; margin:0 auto 0 auto; klebt mein width:50%; jedenfalls janz links...

???

Grüße Alex

[Detlef G.]

Hallo Alex

Du gibst nicht an, wo es horizontal positioniert werden soll.

margin:0 auto 0 auto; <-- wie gebe ich denn sonst eine horizontale Positionierung an?

margin != position

Mit left:0; margin:0 auto 0 auto; klebt mein width:50%; jedenfalls janz links...

Warum sollte margin:auto das Element zentrieren, wenn du es mit
positon:absolute aus dem Elementfluss nimmst und mit left:0 sagst, es soll
ganz links beginnen?
(Es gibt auch andere Werte für left, nicht nur 0%.)

Auf Wiederlesen
Detlef