HTML Code-Zeile mit java script "nach oben verschieben"?
Hallo ihr lieben,
bin noch ein Noob in Coding und stehe gerade vor folgendem Problem: Ich versuche gerade zu coden das ein Objekt der Maus folgen soll. Das funktioniert zwar einwandfrei wenn ich das Objekt direkt im HTML Code einbaue aber nicht wenn ich es zB mit einem Knopf aufploppen lasse was scheinbar daran liegt das die <div> ganz unten auftaucht. Meine Frage lautet nun gibt es einen JS Befehl mit dem ich die <div> weiter nach oben packen kann so das sie über dem <script> auftaucht?
Danke im Vorraus
1 Antwort
Damit du das Element frei über die Fläche bewegen kannst, muss es sich absolut (und damit losgelöst vom üblichen Textfluss) positionieren. Das heißt also auch, dass es nahezu egal ist, ob du es im body weiter oben oder unten platzierst. Was mir als Störfaktor lediglich gerade in den Sinn kommen würde, wären andere absolut platzierte Elemente, die das zu bewegende Element überdecken (dem kann man mit dem Setzen eines z-Index begegnen) oder relativ positionierte Elemente, an denen sich das zu bewegende Element ausrichtet, da es ein Kind dieser ist (dann sollte das Element mindestens eine Ebene weiter nach oben, so lange, bis das body-Element sein Anker ist).
Nichtsdestotrotz würde ich in keinem dieser Fälle erst einmal einen Grund dafür sehen, mit JavaScript bei der Positionierung nachhelfen zu müssen. Die kannst du doch schon initial bestimmen, wenn du dein Dokument erstellst.
<!doctype html>
<head>
<title>Example</title>
<style>
.hidden { display: none }
#follower {
border: 1px solid;
position: absolute;
width: 50px;
}
</style>
</head>
<body>
<button id="show-button" type="button">Show follower</button>
<div class="hidden" id="follower">follow</div>
<script>
function follow(evt) {
follower.style.left = evt.pageX + "px";
follower.style.top = evt.pageY + "px";
}
const follower = document.getElementById("follower");
document.getElementById("show-button").addEventListener("click", evt => follower.classList.remove("hidden"));
document.addEventListener("mousemove", follow);
</script>
</body>
Oder ist das Element, nachdem du es sichtbar schaltest, erst noch feststehend und wird erst durch eine weitere Aktion (z.B. den Klick auf einen zweiten Button) aus den Angeln gehoben?
Du brauchst den Zielcontainer und das zu verschiebende Element.
<div id="target"></div>
<div>
<span>world</span>
<span id="to-move">hello</span>
</div>
<script>
const toMove = document.getElementById("to-move");
const target = document.getElementById("target");
target.appendChild(toMove);
</script>
Sofern die Reihenfolge im Zielcontainer von Bedeutung ist, eignet sich die insertBefore-Methode besser.