✔ Platzhalter bei relativer positionierung umgehen?

[penalizer]

Hallo miteinander,

ich habe mal eine Frage die mich schon seit längeren beschäftigt. Und zwar ist es möglich den Platzhalter der Elternelementes bei relativen Positionierungen zu umgehen? D.h. Wenn ich zwei Elemente inneinander verschachtelt habe, hält sich das obere Element den Platz im Elternelement frei. Dies ist manchmal echt nervig. Wenn es hierzu ein Workaround oder ähnliches gibt würde mir das wirklich helfen .
Danke im voraus für Eure Tipps.

 

[Maik]

Hi,

falls du von dieser Gesetzmäßigkeit bei einer relativen Positionierung sprichst:

Die Angabe relative bezieht sich auf die Normalposition des Elements selbst und verschiebt es entsprechend (Elemente r3 und r6). Der ursprünglich eingenommene Raum bleibt hinsichtlich nachfolgender Elemente – wie die Elemente s4 und s7 demonstrieren – erhalten.

Quelle: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

wäre der Ersatz der top- oder bottom-Eigenschaft durch die margin-top- oder margin-bottom-Eigenschaft eine Möglichkeit, um den "Platzhalter" zu vermeiden.

 

[penalizer]

Hmmkay, hier nochmal zur Veranschaulichung was ich meine:
Die Tabellenzelle hat eine Größe von 50x50px zur Positionierung wurde der Div innerhalb der Zelle platziert. Die innere Tabelle ist durch die äussere mittig innerhalb der Seite platziert und somit der div auch. Skaliere ich nun das Browserfenster wird der Div aufgrund der relativen positionierung mit verschoben. So benötige ich das auch. Allerdings wird die Tabelle aufgrund der Divgröße verzerrt. Das soll nicht sein, ich möchte die Tabellengröße weiterhin als 50x50px anzeigen lassen. Wenn ich die position auf absolut stelle, bleibt der Div Container an den Fenstercoordinaten und somit an der falschen Stelle nach ändern der Fenstergröße, aber die Tabellengröße bleibt richtig.

Hier mal ein Beispielsctipt:

<style type="text/css" media="screen">
    #test2 {
 position:relative;
 float:left;
 margin: 10px 0 0 10px;
 width:100px;
 height:100px;
 background-color:#FF0000;
 z-index:10;
 }
 
</style>
 
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="top"><table  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="50" height="50" bgcolor="#00FF00"><div id="test2"></div></td>
      </tr>
    </table></td>
  </tr>
</table>

Mir ist es durchaus bewusst, das man Tabellen nicht als Layoutelement benutzen sollte. In diesem Fall benötige ich es aber wirklich in der Version wie ich es demonstriere. Ich hoffe es gibt hier irgendeine Möglichkeit da zu tricksen...

Achso: noch zur Ergänzung. Die position absolute klappt im o.g. Script so wie ich es benötige. Da ich aber das Javascript Framework "Scriptacolous" benutze, brauche ich wirklich die position relative (im grunde so wie es im o.g. Script mit absolut t). Blöd, ich weiss...

 

[Maik]

Wenn ich die position auf absolut stelle, bleibt der Div Container an den Fenstercoordinaten und somit an der falschen Stelle nach ändern der Fenstergröße, aber die Tabellengröße bleibt richtig.

Dann versuch es mal auf diese Weise:

#test2 {
 position:absolute;
 float:left;
 margin: 10px 0 0 10px;
 width:100px;
 height:100px;
 background-color:#FF0000;
 z-index:10;
 }

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="position:relative;">
  <tr>
    <td align="center" valign="top"><table  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td style="width:50px;height:50px;vertical-align:top;text-align:left;background:#00ff00;"><div id="test2"></div></td>
      </tr>
    </table></td>
  </tr>
</table>

 

[penalizer]

Ja, alles was du sagst ist schon richtig und klappt in meinem Testdokument auch wunderbar. Allerdings nützt es mir in verbindung mit "scriptacolous" nichts. Der zwingt mich praktisch dazu position:relativ zu benutzen. und dann drehe ich mich wieder im kreis

 

[penalizer]

Soooo, hurra,ich habs endlich! Für alle die den selben (ungewöhnlichen) Weg suchen wie ich, habe ich jetzt nen nettes Workaround. Zur Erklärung: Ich bin gezwungen durch das Framework "Script.aculo.us" (Drag Drop Function) den Layer mit position "relative" zu definieren um den Container nach Drop wieder am Elternobjekt und nicht am Fenster ausrichten zu lassen (Keine Ahnung warum das so ist, aber nun gut). Um dieses zu umgehen bastelt man sich einfach nen 0px hohen und 0px breiten Div Container. Dieser hat position: absolute. Darin wiederum platziert man dann den eigentlichen "Drag/Drop Container". Dieser bekommt allerdings die position relative.

Hier nochmal zur Veranschaulichung:

<style type="text/css" media="screen">
    #test2 {
 position:relative;
 float:left;
 margin:10px 0 0 10px;
 width:100px;
 height:100px;
 background-color:#FF0000;
 z-index:10;
 }
 
    #test1 {
 position:absolute;
 margin:0px 0 0 0px;
 width:0px;
 height:0px;
 }
 
</style>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="top"><table  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="50" height="50" bgcolor="#00FF00"><div id="test1"><div id="test2"></div></div></td>
      </tr>
    </table></td>
  </tr>
</table>

Vielen Dank für deine Hinweise Maik!