Wird es als schlechte Praxis angesehen, die absolute Positionierung zu verwenden?

Ich entwickelte eine Webseite, auf der ich ein Brett für ein Schachspiel zusammen mit ein paar Stückschalen auslegte. Alles geschieht mit HTML (mit jQuery für die dynamische Aktualisierung während des Spiels). Irgendwo hatte ich die Vorstellung, dass die Verwendung der absoluten Positionierung von Elementen innerhalb einer Seite als schlechte Praxis angesehen wird und dass die relative Positionierung vorzuziehen ist.

Nachdem ich zu lange mit der relativen Positionierung zu kämpfen hatte, wurde mir klar, dass die absolute Positionierung der Board-Elemente viel, viel einfacher zu korrigieren wäre ... und das war es auch.

Ist jemandem ein Grund bekannt, warum die relative Positionierung der absoluten vorzuziehen ist? Gibt es Richtlinien oder Faustregeln, die Sie anwenden, wenn Sie sich für einen Ansatz entscheiden?

Für ein Schachspiel, wie Sie es entwickeln, ist die Verwendung der absoluten Positionierung von Natur aus nichts Falsches. Wie Sie sagten, machen die relative Positionierung und das normale Flusslayout diese Art von Aufgabe ziemlich schwierig.

Wenn Sie eine Standardwebsite entwickeln, z. B. eine Website mit öffentlichen Diensten, überschreibt die absolute Positionierung natürlich das Standardablauflayout von Browsern und verringert so die Zugänglichkeit für viele Benutzer. In diesem Fall würde ich es vermeiden.

Ein weniger bekannter Vorteil der absoluten Positionierung besteht jedoch darin, dass sie eine lokalisierte absolute Positionierung innerhalb des nächsten "positionierten" übergeordneten Elements ermöglicht.

Hinweis: Ein "positioniertes" Element kann eines der folgenden sein: relativ, fest, absolut oder klebrig.

Erklären:

<div id="parentDIV" style="position:relative">
    <div id="childDIV" style="position:absolute;left:20px;top:20px;">
          I'm absolutely positioned within parentDIV.
    </div>
</div>

Hier childDIVist tatsächlich 20px von links und 20px von oben positioniert parentDIV, NICHT das Gesamtdokument . Dies gibt eine schöne präzise Kontrolle über verschachtelte Elemente auf einer Seite, ohne das gesamte Seitenflusslayout zu beeinträchtigen.

Um Ihre Frage zu beantworten (relative Positionierung wird der absoluten vorgezogen): Ich glaube nicht, dass es eine richtige Antwort gibt, es hängt davon ab, was Sie bauen müssen. Bei der allgemeinen Positionierung (absolut oder relativ) im Vergleich zum Standardflusslayout ist mein Ansatz jedoch wie oben beschrieben.

Beachten Sie auch, dass die absolute Positionierung nicht nur zum Positionieren von Objekten relativ zum Browserfenster verwendet wird, sondern auch zum genauen Positionieren von Objekten innerhalb eines enthaltenen Elements. Als ich dies nach Jahren der Verwendung von CSS endlich verstand, revolutionierte es meine Fähigkeit, CSS effektiv zu nutzen.

Der Schlüssel ist, dass ein absolut positioniertes Element im Kontext des ersten Vorfahrenelements positioniert ist, das position:relativeoder hat position:absolute. Also, wenn Sie dies haben:

div.Container
{
   position:relative
   width:300px;
   height:300px;
   background:yellow;
}

div.PositionMe
{
   position:absolute;
   top:10px;
   right:10px;
   width:20px;
   height:20px;
   background:red
}

und

<div class=Container>
...
   <div class=PositionMe>
   ...
   </div>
...
</div>

... das div PositionMewird relativ zu Container, nicht zur Seite platziert.

Dies eröffnet alle möglichen Möglichkeiten für eine präzise Platzierung in bestimmten Situationen, ohne die allgemeine Flexibilität und den Fluss der Seite zu beeinträchtigen.

Es beantwortet Ihre Frage nicht, aber ...

Für ein Schachspiel kann man auch einen Tisch benutzen.
Schließlich werden Spalten und Zeilen angezeigt.

Jetzt weiß ich, dass viele Leute anfangen zu schreien: "Benutze keine Tische" und "Tische sind böse". Tabellen sind jedoch immer noch ein gültiges Werkzeug zum Anzeigen einiger Datentypen, insbesondere von in Spalten / Zeilen organisierten Daten.

Ich denke, das Problem ist, dass die absolute Positionierung leicht zu missbrauchen ist. Ein Koordinatensystem ist für Laien viel einfacher zu verstehen als das Boxmodell. Programme wie Dreamweaver machen es außerdem trivial einfach, eine Seite mit absoluter Positionierung zu gestalten (und die Leute wissen nicht, was sie tun).

Für ein typisches Seitenlayout sollte die statische Standardpositionierung jedoch angemessen sein und die Arbeit in 90% der Fälle erledigen. Es ist sehr flexibel und indem alles im normalen Fluss bleibt, sind sich die Elemente der anderen Elemente um sie herum bewusst und handeln entsprechend, wenn sich die Dinge ändern. Dies ist wirklich gut, wenn es um dynamische Inhalte geht (die meisten Seiten sind heutzutage).

Die Verwendung der absoluten Positionierung ist weitaus starrer und macht es schwierig, Layouts zu schreiben, die gut auf sich ändernde Inhalte reagieren. Sie sind einfach zu explizit. Es ist jedoch perfekt, wenn Sie frei bewegliche Elemente auf einer Seite benötigen (Ziehen / Ablegen), Elemente übereinander legen müssen oder andere Layouttechniken, die von der Arbeit an einem Koordinatensystem profitieren würden. Ehrlich gesagt klingt ein Schachbrett nach einem guten Grund, es zu benutzen.

Sehen Sie sich Ihre Website in verschiedenen Browsern unter folgenden Bedingungen an:

• Schalten Sie Ihre Betriebssystemeinstellungen auf High-dpi / große Schriftarten / hohen Kontrast (alle ändern die Größe der Standard-Browser-Schriftart).
• Erhöhen / verringern Sie die Standardschriftgröße im Browser
• Überschreiben Sie die Seitenschriftarten im Browser (normalerweise irgendwo in den Eingabehilfen).
• Überschreiben / Deaktivieren des Seiten-Stylesheets (zugegeben, Benutzer sollten in diesem Szenario nicht erwarten, dass ein Schachspiel ordnungsgemäß funktioniert :-))

Im Allgemeinen ist die absolute Position schlecht, wenn Sie Inline-Elemente mit nicht festen Schriftgrößen haben. Für Ihr Szenario könnte es funktionieren; Es wird jedoch viele Randfälle geben, in denen etwas Funky weitergeht.

Die relative Positionierung ist hilfreich, wenn Sie ein völlig flüssiges Layout erstellen können, da es auf einer Vielzahl von Bildschirmauflösungen angemessen erscheint.

Abgesehen davon ist es ziemlich häufig (insbesondere wenn versucht wird, die Cross-Browser-Kompatibilität mit älteren Versionen zu gewährleisten), dass völlig flüssige Layouts schwer zu finden sind. Ein Rückgriff auf die absolute Positionierung sollte nicht verpönt werden, die meisten sterblichen Webentwickler tun dies die ganze Zeit.

Solange Sie Ihren HTML-Code so strukturieren, dass die Elemente einer logischen Reihenfolge folgen, die beim Rendern ohne CSS sinnvoll ist, gibt es keinen Grund, warum die Verwendung der absoluten Positionierung als schlechte Praxis angesehen werden sollte.

Es gibt keine festen Regeln. Die verschiedenen Formen der Positionierung sind alle in verschiedenen Dingen gut.

Der Großteil der Arbeit wird normalerweise am besten mit statischer Positionierung erledigt (dies ist die am wenigsten fragile Option), aber die absolute Positionierung ist gelegentlich sehr gut. Relative Positionierung hingegen habe ich nie verwendet, außer für Animationen (für Elemente, die statisch positioniert sind, bis JavaScript beteiligt ist), um einen Block für die absolute Positionierung zu erstellen (damit das Element selbst überhaupt nicht verschoben wird). und (sehr, sehr selten) ein oder zwei Pixel eines Elements.

Einige Dinge sind ohne Position nicht möglich: absolut. Andere Dinge sind mit absoluter Positionierung viel einfacher zu erreichen (nehmen wir an, Sie möchten eine Schaltfläche unten rechts für "Lesen Sie mehr" in einem Feld mit fester / Mindesthöhe und Sie haben nicht genug Text in diesem Feld). Also, mein Rat: Verwenden Sie einfach den, der Ihren Anforderungen entspricht ...

Es scheint mir, als wäre ich der einzige hier, der der Annahme, dass absolute Positionierung keine schlechte Praxis ist, überhaupt nicht zustimmt. Außer Bedingungen wie Animationen oder Elementen, die speziell an einem "ungewöhnlichen" Ort innerhalb ihrer Eltern sitzen sollten, bricht die absolute Positionierung die Struktur Ihres HTML (was genau das ist, was HTML meiner Meinung nach definieren soll), weil Sie sehr leicht Ergebnisse erzielen können, die die Visualität von der Struktur unterscheiden. Darüber hinaus ist die Implementierung von Design mit Absolut viel schwieriger und problematischer, da Sie jedes Element messen müssen und viel Platz für Fehler haben (gegen den normalen Ablauf, der viel einfacher und für die Strukturerstellung eines Website-Skeletts geeignet ist).

Und schließlich, was das Schachbrett betrifft, glaube ich, dass der schwierigste Weg, es zu erstellen, die Verwendung der absoluten Position ist! Das Brett mit Tisch zu machen wäre viel einfacher und richtiger (schließlich ist dies ein Tisch) ... Und ich persönlich würde es mit einer cubeKlasse machen, die es hätte float: left(mit clearauf jedem neunten Würfel)

Die absolute Positionierung von 64 verschiedenen Quadraten ist verrückt!

IMO, überhaupt keine schlechte Sache. Ich habe kürzlich einen Auftrag mit Einhaltung der AA-Standards und Unterstützung für FF2, IE7, IE6 abgeschlossen (ja, ein Schmerz, den ich kenne). Es gab bestimmte Layouts, die nur durch absolute Positionierung erreichbar waren! Sogar bestimmte Komponenten wie Schaltflächen, bei denen eine Überlagerung erforderlich war (Transparentfolien), waren nur aufgrund der absoluten Positionierung möglich. Wenn jemand einen besseren Weg hat, verweisen Sie mich bitte darauf.

Absolute Positionierung unterbricht den Fluss. Wenn wir wissen, wie man den Fluss einschränkt (die Koordinaten der Eltern auf relativ / absolut ändern), macht es Spaß. Ich weiß nichts über ältere Browser (IE6 selbst ist ein Dinosaurier), aber eine schmerzhafte Sache, die ich fand, war, dass das Schreiben in PDF (süßes PDF) oder das Öffnen mit WINWORD (verklage mich) ein schäbiges Ergebnis liefert.

Absolute Positionierung ist ein Werkzeug, wie jedes Werkzeug, es kann auf gute und schlechte Weise verwendet werden. Daran ist nichts auszusetzen: StackOverflow verwendet es wahrscheinlich, um seine Warnungen in der orangefarbenen Leiste oben auf der Site anzuzeigen.

In Ihrer Situation ist dies auch nicht schlecht. Aber ich denke, es wäre viel einfacher für Sie, es nicht zu benutzen.

Ein Schachbrett ist eine Tabelle, Tabellenzellen benötigen keine Positionsänderungen. Für Veranstaltungen onblur/ onfocusund cieerledigt den Job. Warum brauchen Sie überhaupt eine Pixelberechnung?

Lassen Sie sich also nicht von der Qualität Ihrer Praxis betonen, aber vielleicht können Sie prüfen, ob Sie wirklich eine absolute Positionierung benötigen.