Layer unabhängig voneinander positionieren

[Willi Eggeling]

Hallo!

Für ein Projekt positioniere ich mehrere Layer mit relativer Positionierung und absoluter Größe in einem Parentlayer ("div").

Wenn ich die Layer mit der Angabe von Top und Left als Styleattribut positioniere, beinflussen sie sich gegenseitig. So ist beispielsweise nicht nur kein Überlappen möglich, sondern auch die Positionierung ganz dich beineinander. Ein Setzen von unterschiedlichen z-Leveln hat leider auch keine Veränderung bewirkt...

Was kann ich da machen?

Vielen Dank im Voraus!!

Willi

[Kalle_B]

Hallo!

Wenn ich die Layer mit der Angabe von Top und Left als Styleattribut positioniere, beinflussen sie sich gegenseitig.

Dann nimm position:absolute

So ist beispielsweise nicht nur kein Überlappen möglich

Sollte bei position:realtive aber möglich sein mit negativen Angaben. Zum Beispiel top:-2em

Kalle

[Willi Eggeling]

Dann nimm position:absolute

leider brauche ich die relative Positionierung :(

Gibt es andere Möglichkeiten?

Danke!

[Detlef G.]

Hallo Willi

leider brauche ich die relative Positionierung :(

Warum und Wozu?

Gibt es andere Möglichkeiten?

Wenn du Elemente vollständig unabhängig voneinander positionieren willst, ist das nur mit position:absolute möglich. Nur position:absolute entfernt Elemente vollständig aus dem Seiteninhalt, um sie dann an der angegebenen Position aufzukleben. Bei position:relative bleiben sie im normalen Elementfluss, reservieren den benötigten Platz (wie bei position:static) und werden lediglich um die angegebenen Werte für top/bottom und right/left verschoben.

Beachte, worauf sich die Position bei position:absolute bezieht. (dort unter "Erläuterung")

Auf Wiederlesen
Detlef

[Willi Eggeling]

Hallo Detlef!

Es geht darum, dass die Layer in einem Parentlayer angeordnet werden sollen. Der Hintergrund:

Für eine Art CMS existieren verschiedene Templates, die jeweils in einem Layer realisisert sind. Bei einer Seite können beliebig viele Templates erstellt, und dann mit der JS Drag&Drop Bibliothek von Walter Zorn (WalterZorn.com) individuell angeordnet werden.

Schließlich soll diese Anordnung gespeichert, und beim regulären Betrachten der Seite ohne Javascript angezeigt werden.

Würde ich eine absolute Positionierung verwenden, könnte ich die Koordinaten nur so darstellen, wie sie im Administrationsmenü existieren. Jedoch kann das ganze verschoben werden, da in der Seite ein Header mit Banner und Menü existiert. Außerdem kann sich die Seite durch ein Verändern der SchriftgröLße verschieben. Durch die relative Positionierung speichere ich die Positionierung innerhalb des Parentlayers, in dem die Templates angezeigt werden - unabhängig von dem Rest der Seite.

Leider beeinflussen sich diese Elemente wie vorher beschrieben.

Gibt es eventuell eine bessere Alternative?

Danke!

[Detlef G.]

Hallo Willi

Es geht darum, dass die Layer in einem Parentlayer angeordnet werden sollen.

In wiefern ist das ein Problem?
Hast du bei den Erläuterungen für position:absolute auf der verlinkten Seite nachgelesen, worauf sich die absolute Positionierung bezieht?

Für eine Art CMS existieren verschiedene Templates, die jeweils in einem Layer realisisert sind. Bei einer Seite können beliebig viele Templates erstellt, und dann mit der JS Drag&Drop Bibliothek von Walter Zorn (WalterZorn.com) individuell angeordnet werden.

... Durch die relative Positionierung speichere ich die Positionierung innerhalb des Parentlayers, in dem die Templates angezeigt werden - unabhängig von dem Rest der Seite.

Nein, durch die relative Positionierung speicherst du nicht die Position innerhalb des Parentlayers sondern lediglich die Verschiebung von der Position, die sie ohne extra Positionsangaben hätten.

Hast du bei den Erläuterungen für position:absolute auf der verlinkten Seite nachgelesen, worauf sich die absolute Positionierung bezieht?
Dort steht:
"absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist. Scrollt mit."

Leider beeinflussen sich diese Elemente wie vorher beschrieben.

Selbstverständlich, bei position:relative.

Auf Wiederlesen
Detlef

[Willi Eggeling]

Hallo Detlef!

Nun habe ich den Artikel erstellt, und es hat geholfen - Danke!

Inzwischen hat sich eine neue Frage ergeben:

Ich möchte einen Layer innerhalb des großen Parentlayers am rechten Rand positionieren.

Gibt es da eine einfache Möglichkeit? Ich hab da leider nichts gefunden..

Grüße,

Willi

[Detlef G.]

Hallo Willi

Ich möchte einen Layer innerhalb des großen Parentlayers am rechten Rand positionieren.

Gibt es da eine einfache Möglichkeit? Ich hab da leider nichts gefunden..

Wenn er auf andere Elemente keinen Einfluss haben soll:

#parentlayer {  
  position:relative;  
}  
#einLayer {  
  position:absolute;  
  right:0;  
}  

Sonst:

#einLayer {  
  float:right;  
}  

Auf Wiederlesen
Detlef

[Willi Eggeling]

Hallo Detlef!

Das hat funktioniert, Danke!

Allerdings klappt das Erste nach dem Einbau nicht. Wenn ich den Parentlayer verschiebe, also beispielsweise im oberen Teil der Seite ein größeres Banner einbinde, verschiebt sich der untergeordnete Layer bei absoluter Positionierung nicht mit.

Was kann ich da machen?

Grüße,

Willi

[Detlef G.]

Hallo Willi

Allerdings klappt das Erste nach dem Einbau nicht. Wenn ich den Parentlayer verschiebe, also beispielsweise im oberen Teil der Seite ein größeres Banner einbinde, verschiebt sich der untergeordnete Layer bei absoluter Positionierung nicht mit.

Dann machst du etwas falsch.
Was genau, verrät mir meine Glaskugel leider nicht.

Hast du dem Parentlayer position:relative; gegeben?
Oder hat er noch andere Eigenschaften, die dem entgegenstehen?

Auf Wiederlesen
Detlef

[Willi Eggeling]

Hast du dem Parentlayer position:relative;

nein, position:absolute, aber ich hatte alles mögliche durchprobiert - immer der selbe effekt. setze ich die sublayer auf top:0px, fangen sie immer am oberen Bildschirmrand, nicht am Parentlayerrand an.

Irgendeine Idee?

[Detlef G.]

Hallo Willi

Hast du dem Parentlayer position:relative;

nein, position:absolute, aber ich hatte alles mögliche durchprobiert

Und warum nicht position:relative;?

• immer der selbe effekt. setze ich die sublayer auf top:0px, fangen sie immer am oberen Bildschirmrand, nicht am Parentlayerrand an.

Solange sie kein Vorfahrenelement haben, bei dem eine von static abweichende Angabe für position angegeben ist, beziehen sich die Angaben für top, right, bottom und left auf den Viewport (das Browserfenster).

Wenn du deinem Parentlayer position:relative; gibst, dann wird er genau dort und genauso dargestellt, als wenn er keine Angabe zu position hätte. Aber seine absolut positionierten Nachfahreneelemente beziehen ihre Position auf seinen Rand.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
<html>  
  <head>  
    <title>Positon</title>  
    <style type="text/css">  
[code lang=css]#Parentlayer {  
  position:relative;  
  height:300px;  
  width:75%;  
  margin:0 auto;  
  background-color:red;  
}  
#Parentlayer div {  
  position:absolute;  
  background-color:green;  
  width:10em;  
  height:2em;  
}  
#L1 {  
  top:0;  
  right:0;  
}  
#L2 {  
  bottom:0;  
  left:50px;  
}  
#L3 {  
  top:150px;  
  right:150px;  
}  

</style>
  </head>
  <body>
    <h1>Position relativ und absolut im Relativen</h1>
    <div id="Parentlayer">
      <div id="L1">das ist L1</div>
      <div id="L2">das ist L2</div>
      <div id="L3">das ist L3</div>
    </div>
  </body>
</html>

[/code]
Auf Wiederlesen
Detlef