Koordinatensytem eines <div> Elements verschieben [Archiv]

Gast

2009-12-22, 06:45:30

Guten Morgen,

angenommen ich habe folgenden HTML-Code(Ausschnitt):

<div id="zeichenfläche">
<div id="objekt1" style="left: 50px; top: 50px;"></div>
<div id="objekt2" style="left: -50px; top: -50px;"></div>
</div>

Dann sehe ich, logischerweise, nur div#objekt1, da div#zeichenfläche oben-links den null-punkt(0 / 0) seines koordinaten-systems hat. Wie schaffe ich es nun (css, javascript, html oder sonst wie) diesen "nullpunkt" von div#zeichenfläche zu verschieben sodass div#objekt2 sichtbar wird? Gibt es dafür css-egeinschaften?
wäre für einen denkanstoß erfeut

hintergrund: ich möchte eine unendliche "zeichenfläche" auf der ich objekte ablegen kann erstellen. aehnlich google maps, nur eben unendlich und nicht nur sehr groß.

darph

2009-12-22, 12:04:47

Hast du dich mal mit der CSS-Eigenschaft position (http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position) auseinander gesetzt?

Edith, die Sau, sagt: Ich glaub du meinst sowas (das solltest du direkt in eine HTML-Datei speichern und öffnen können):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Relative Positioning inside a div</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />


<script type="text/javascript"> </script>
<style type="text/css" media="screen">

.hidden {
overflow: hidden;
}

#frame {
width: 100px;
height: 100px;
border: 2px dashed red;
}

#frame div {
width: 50px;
height: 50px;
border: 1px solid black;
position: relative; /* das ist der entscheidende Punkt */
font-family: Helvetica;
font-size: 8px;
}

#box1 {
left: 20px;
top: 40px;
background-color: #FF6699;
}

#box5 {
left: 100px;
top: 120px;
background-color: #CCFF33;
}

#box4 {
left: 87px;
top: 90px;
background-color: #FF9900;
}

#box3 {
left: 100px;
top: 20px;
background-color: #33CCCC;
}

#box2 {
left: 45px;
top: 84px;
background-color: #FFCC99;
}

</style>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>

<script type="text/javascript">
$(document).ready(function() {

$("#toggleVisible").click(function() {
$("#frame").toggleClass("hidden")
});

$("#move").click(function() {

// Aus dem Formular auslesen, wohin wir eigentlich
// wollen.
var moveX = parseInt($("#moveX").val());
var moveY = parseInt($("#moveY").val());

// den Button deaktivieren
$("#move").attr("disabled", "disabled");

// für jedes div innerhalb von #frame
$("#frame div").each(function() {

// aktuelle Position zwischenspeichern
var posTop = parseInt($(this).css("top"));
var posLeft = parseInt($(this).css("left"));

// Position zu der wir wollen anhand von
// aktueller Position und Bewegungsvektor
// berechnen
var newTop = moveY + posTop;
var newLeft = moveX + posLeft;

// Bewegung animieren
$(this).stop().animate({
// hin
top: newTop + "px",
left: newLeft + "px"
}, 3000).animate({
// und zurück
top: posTop + "px",
left: posLeft + "px"
}, 3000);
}).queue(function() {
// nach dem die Animation durchgelaufen ist
// den Button wieder frei geben.
$("#move").removeAttr("disabled");
$(this).dequeue();
});
});
});
</script>
</head>
<body>
Vector: Move by <br />
X: <input type="text" id="moveX" name="x" value="-100" />,
Y: <input type="text" id="moveY" name="y" value="-300" /> <br />
<button id="move">move</button>
<button id="toggleVisible">Toggle overflow</button>

<div id="frame" class="hidden">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
<div id="box4">box4</div>
<div id="box5">box5</div>
</div>
</body>
</html>

DanMan

2009-12-22, 16:06:57

Grundsätzlich: absolut positionierte Elemente orientieren sich immer am nächsten, äußeren absolut oder relative positionierten Element. In deiner Formulierung: Wenn du einen neuen Nullpunkt für ein absolut positioniertes Element setzen willst, dann positionier das Elternelement relativ.

Das war ne ganze Menge Positionierung für 2 Sätze. :ugly: