Absolute Positionierung in einem absolut positioniertem Container

Status
Nicht offen für weitere Antworten.

der_killer_49_dot

Grünschnabel
Hallo,
ein kleines Problemchen hätte ich, dessen Lösung mir eine Menge Arbeit ersparen würde.

Man nehme an, man positioniere ein DIV von oben und von links 10px. (absolut)

Nun möchte ich beispielsweise _innerhalb_ diesem DIV ein Bild sagen wir 5px von oben und links positionieren.

Das ganze würde natürlich gehen wenn ich das Bild einfach 15 px von oben und links positioniere. Das Ergebnis wäre das Gleiche. Nur ich möchte mehrere Elemente positionieren, was ein imenser Aufwand wäre, wenn ich das Elternobjekt nur um einen Pixel verschieben würde, alles neu zu berechnen.

So eine art inner_absolut in CSS wenigstens zu umschreiben habe ich vergeblich gesucht.

Das einzigste was mir dazu noch eingefallen ist wäre ein kleines Script was universell benutzbar ist. Quasi mit dem Aufruf der id des Elementes, der dann von dem Elternelement die absolute positionierung findet und dementsprechend noch die Summanden addiert.

Quasi eine Funktion wie dieser Pseudoce, dann positioniere ich quasi alles mittels JavaScript:

Code:
function PosElementByID( parentObj, mainObj, x, y)
{
   mainObj.position(
     parentObj.GetX() + x,
     parentObj.GetY() + y  );
}

Noch besserer wäre eine Funktion wie diese und müsste nicht mal das Elternobjekt angeben:
(Als Elternobjekt wird eigentlich immer ein DIV genommen)
Code:
function PosElementByID( mainObj, x, y)
{
   mainObj.position(
     mainObj.GetParentObj()->GetX() + x,
     mainObj.GetParentObj()->GetY() + y  );
}

Ja, das wäre es auch schon, über Anregungen und Anreize würde ich mich richtig freuen.

PS: Sagen wir es sind ca.30 Elemente pro Seitenaufruf, die so positioniert werden würden. Würde das Performancetechnisch gehen, oder wäre mit Einbußen durch die Codeinterpretation zu rechnen (im GAU das die elemente sich erst langsam zurechtschieben, da da Script erst nach einer fertig geladenene Seite beginnt zu wirken). Die Seite ist an sich nicht groß, vlt. 6kb valider XHTML Code. Nur es sind meisst Bilder die so positioniert werden.


Ich wünsch noch eine schönes Jahr 2007 und einen guten Rutsch.
 
Zuletzt bearbeitet:
Hi,

wenn sich die Elemente in dem Container befinden, beziehen sich ihre absoluten Positionsangaben auf die Grenzen des übergeordneten Elements, und sind somit relativ. ;)
 
Ich wollte zum Ausdruck bringen, dass hier überhaupt keine Berechnung erforderlich ist, wenn das Elternelement im Anzeigebereich neu positioniert wird, da sich die Positionsangaben der Kindelemente auf die Grenzen des Elternelemnts beziehen, unabhängig, ob nun relativ oder absolut positioniert.

Wenn "Bild 1" fünf Pixel von oben und links positioniert sein soll, lauten auch so seine "Koordinaten" im CSS, und nicht "15px".
 
Nochmal probiert: Es funktioniert nicht mittels relative, oder ich bin zu doof oder hab etwas alsch gemacht.

Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<title>Test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
			/*<![CDATA[*/ 
			div#parent { position:absolute; top:10px; left:10px; margin:0px; padding:0px;}
			div#inner1 { position:relative; top:5px; left:5px; margin:0px; padding:0px;}
			div#inner2 { position:relative; top:6px; left:6px; margin:0px; padding:0px;}
			/*]]>*/
		</style>
	</head>
	<body>

	<div id="parent">
		<div id="inner1">
			Hallo
		</div>
		<div id="inner2">
			Hallo
		</div>
	</div>
	</body>
</html>

Ist _leider_ nicht das gleiche, wie als wenn man die Zeilen in folgene ändert:
Code:
div#inner1 { position:absolute; top:15px; left:15px; margin:0px; padding:0px;}
div#inner2 { position:absolute; top:16px; left:16px; margin:0px; padding:0px;}
 
Zuletzt bearbeitet:
Code:
div#parent { position:absolute; top:100px; left:100px; margin:0px; padding:0px;}
div#inner1 { position:absolute; top:5px; left:5px; margin:0px; padding:0px;}
div#inner2 { position:absolute; top:6px; left:6px; margin:0px; padding:0px;}
Code:
div#parent { position:relative; top:100px; left:100px; margin:0px; padding:0px;}
div#inner1 { position:relative; top:5px; left:5px; margin:0px; padding:0px;}
div#inner2 { position:relative; top:6px; left:6px; margin:0px; padding:0px;}
oder auch
Code:
div#parent { position:relative; top:100px; left:100px; margin:0px; padding:0px;}
div#inner1 { position:absolute; top:5px; left:5px; margin:0px; padding:0px;}
div#inner2 { position:absolute; top:6px; left:6px; margin:0px; padding:0px;}
funktioniert in allen mir zur Verfügung stehenden Browsern gleichermaßen, tadellos, und führt zum selben Ergebnis, dass #inner1 und #inner2 ihre Position relativ zur neu gesetzten Position der Box #parent verändern.
 
Ich denke das war oben falsch zu verstehen. Das Bild sollte nicht auf den Koordinaten von 5px sein, sondern 5px vom Rand des div elementes. Nicht von der Seite. Daher 15px.

Danke, das mit der Margin Eigentschaft habe ich eben geändert. Das ist ja so schon richtig das es funktioniert, nur es funktioniert nicht wie gewollt. Der text müsste sich überlappen, das tut er aber nach der relative Eigenschaft nicht mehr :(. Wenn ich somit ein Bild über ein anderes legen will geht das nicht. Es würde darunter angezeigt werden.
 
Tut mir leid, aber mit den von mir genannten Methoden funktioniert die Positionierung der Elemente einwandfrei, unabhängig, ob nun mit Text oder Grafikelementen.

Und auch mit der Überlappung gibt's bei mir keine Probleme, es sei denn, #inner1 soll #inner2 überlappen / -decken, dann müsste diese Box mit z-index in der Schichtposition darüber positioniert werden.
 
Und nun sag mir bitte, was sich hier nicht wie gewünscht überlappt, derweil geh ich mal was essen. ;)

demo_der_killer_49_dot.jpg
 
Status
Nicht offen für weitere Antworten.
Zurück