Czy uważa się za niewłaściwą praktykę stosowanie pozycjonowania bezwzględnego?

Question

Opracowywałem stronę internetową, na której układałem planszę do gry w szachy, wraz z kilkoma tacami. Wszystko odbywa się za pomocą HTML (z jQuery do dynamicznej aktualizacji podczas gry). Gdzieś mi się zdało, że używanie bezwzględnego pozycjonowania elementów na stronie było uważane za złą praktykę, i że lepiej było użyć pozycjonowania względnego.

Po zbyt późnym zmaganiu się ze względnym pozycjonowaniem zdałem sobie sprawę, że absolutne pozycjonowanie elementów planszy byłoby o wiele łatwiejsze do uzyskania ... i tak było.

Czy ktoś jest świadomy, że względne pozycjonowanie jest lepsze niż bezwzględne? Czy istnieją jakieś wytyczne lub reguły, które stosujesz, podejmując decyzję, które podejście zastosować?

Answer 1

Jeśli chodzi o grę w szachy, taką jak rozwijasz, nie ma nic złego w używaniu pozycjonowania absolutnego. Jak powiedziałeś, względne pozycjonowanie i normalny układ przepływu sprawiają, że tego rodzaju zadanie jest dość trudne.

Oczywiście, jeśli tworzysz bardziej standardową stronę internetową, na przykład witrynę świadczącą niektóre usługi publiczne, pozycjonowanie bezwzględne zastępuje domyślny układ przepływu przeglądarek, a zatem zmniejszy dostępność dla wielu użytkowników. W tym przypadku uniknęłbym tego.

Po tym, mniej znaną korzyścią z pozycjonowania absolutnego jest to, że umożliwia zlokalizowane pozycjonowanie absolutne w obrębie (względnie pozycjonowany) element rodzica. Aby wyjaśnić:

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

Tutaj childDIV jest właściwie umieszczony 20px od lewej i 20 pikseli od górnej parentDIV, NIE ogólny dokument. Zapewnia to precyzyjną kontrolę nad zagnieżdżonymi elementami na stronie, bez poświęcania ogólnego układu przepływu stron.

Więc, aby odpowiedzieć na twoje pytanie (względne pozycjonowanie jest lepsze od absolutnego): Nie sądzę, że istnieje poprawna odpowiedź, zależy to od tego, co chcesz zbudować. Jednak w ogólnym ustawieniu (bezwzględnym lub względnym) w stosunku do domyślnego układu przepływu moje podejście jest takie, jak opisano powyżej.

Answer 2

Względne pozycjonowanie jest dobre, jeśli można uzyskać całkowicie płynny układ, ponieważ będzie wyglądać rozsądnie w szerokim zakresie rozdzielczości ekranu.

Często się zdarza, że ​​(szczególnie przy próbie kompatybilności ze starszą wersją w przeglądarkach), że płynne układy są trudne do uzyskania. Wracając do pozycjonowania absolutnego, nie powinno się marszczyć, większość śmiertelnych twórców stron internetowych robi to cały czas.

Answer 3

Spójrz na swojej stronie internetowej w różnych przeglądarkach pod następującymi warunkami:

• przełączyć ustawienia OS wysokiej dpi/dużych czcionek/wysokim kontraście (wszystko zmienić rozmiar czcionki domyślnej przeglądarki)
• zwiększenie/zmniejszenie domyślny rozmiar czcionki w przeglądarce
• Zastępowanie czcionek strony w przeglądarce (zwykle gdzieś w opcjach Accessibility)
• Zastąp/wyłącz stylów strony (przyznanej użytkownicy nie powinni spodziewać się gry w szachy do działa prawidłowo w tym scenariusz :-))

Ogólnie pozycja absolutna jest zła, gdy masz elementy śródliniowe z czcionkami o nie ustalonym rozmiarze. Dla twojego scenariusza może to zadziałać; jednak będzie wiele skrajnych przypadków, w których będzie działać coś ciekawego.

Answer 4

IMO, wcale nie jest zła. Niedawno ukończyłem zadanie z przestrzeganiem norm AA i wsparciem dla FF2, IE7, IE6 (tak, ból, który znam). Istniały pewne układy, które można było osiągnąć tylko dzięki absolutnej pozycji! Nawet niektóre elementy, takie jak guziki, w których potrzebne było nakładanie warstw (przezroczystości), były możliwe tylko z powodu bezwzględnego pozycjonowania. Jeśli ktoś ma lepszy sposób, proszę odesłać mnie do tego.

Bezwzględne pozycjonowanie przerywa przepływ, jeśli wiemy, jak ograniczyć przepływ (zmień współrzędne rodziców na względne/bezwzględne), jest to zabawne. Nie wiem o starszych przeglądarkach (sam IE6 to dinozaur), ale jedną z bolesnych rzeczy, które znalazłem, było napisanie do PDF ("Śliczny PDF") lub otwarcie za pomocą WINWORD (pozwać mnie), co dało niezbyt dobry wynik.

Answer 5

Dopóki struktura kodu HTML jest taka, aby elementy były zgodne z logiczną kolejnością, która ma sens w przypadku renderowania bez CSS, nie ma powodu, dla którego stosowanie bezwzględnego pozycjonowania powinno być uważane za złą praktykę.

Answer 6

Nie ma sztywnych reguł. Różne formy pozycjonowania są dobre w różnych rzeczach.

Większość prac zwykle najlepiej wykonywać przy pozycjonowaniu statycznym (jest to najmniej delikatna opcja), ale absolutne pozycjonowanie jest bardzo dobre przy okazji. Natomiast pozycjonowanie względne jest czymś, czego nigdy nie używałem, z wyjątkiem animacji (na elementach, które są statycznie pozycjonowane do momentu włączenia JavaScriptu), ustanawiając blok zawierający absolutne pozycjonowanie (więc sam element nie jest w ogóle przenoszony) i (bardzo rzadko) jedno lub dwa piksele elementu.

Answer 7

Niektórych rzeczy nie da się zrobić bez pozycji: absolutna. Inne rzeczy są łatwiejsze do osiągnięcia z absolutnym pozycjonowaniem (powiedzmy, że chcesz mieć prawy dolny przycisk dla "czytaj więcej" w oknie o stałej/min wysokości i nie masz wystarczającej ilości tekstu w tym polu). Więc moja rada: wystarczy użyć jednego, który pasuje do Twoich potrzeb ...

Answer 8

To nie odpowiedzieć na Twoje pytanie, ale ...

Na planszy szachy jak myślę, że można także użyć tabeli .
W końcu to kolumny i wiersze, które wyświetlasz.

Teraz wiem, że wiele osób zaczyna krzyczeć "nie używać stołów", a "stoły są złe". Tabele są jednak nadal ważnym narzędziem do wyświetlania niektórych typów danych, szczególnie danych uporządkowanych w kolumnach/wierszach.

Answer 9

Należy również pamiętać, że pozycjonowanie bezwzględne służy nie tylko do pozycjonowania elementów względem okna przeglądarki - służy ono również do dokładnego pozycjonowania elementów w elemencie zawierającym. Kiedy w końcu to zrozumiałem - po latach używania CSS - to naprawdę zrewolucjonizowało moją umiejętność efektywnego używania CSS.

Klucz polega na tym, że element pozycjonowany bezwzględnie znajduje się w kontekście pierwszego elementu przodka, który ma position:relative lub position:absolute. Więc jeśli masz to:

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

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

i

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

... div PositionMe zostaną umieszczone względem Container, a nie do strony.

To otwiera wiele możliwości precyzyjnego umieszczenia w konkretnych sytuacjach bez poświęcania ogólnej elastyczności i płynności strony.

Answer 10

Myślę, że problemem jest to, że pozycjonowanie absolutne łatwo nadużywać. Układ współrzędnych jest znacznie łatwiejszy do zrozumienia dla ludzi świeckich niż model pudełkowy. Również programy takie jak Dreamweaver sprawiają, że łatwe jest układanie strony za pomocą pozycjonowania absolutnego (a ludzie nie zdają sobie sprawy z tego, co robią).

Jednak dla typowego układu strony domyślne pozycjonowanie statyczne powinno być odpowiednie i wykonać zadanie w 90% przypadków. Jest bardzo elastyczny i zachowując wszystko w normalnym przepływie, elementy są świadome innych elementów wokół nich i będą działać zgodnie z tym, co się zmieni. Jest to naprawdę dobre, gdy mamy do czynienia z treściami dynamicznymi (które większość stron w dzisiejszych czasach).

Korzystanie z pozycjonowania bezwzględnego jest o wiele bardziej sztywne i utrudnia pisanie układów, które dobrze reagują na zmieniającą się zawartość. Są po prostu zbyt jawne. Jest jednak doskonały, jeśli potrzebujesz swobodnie poruszających się elementów wokół strony (przeciąganie/upuszczanie), nakładania elementów na siebie nawzajem lub innych technik układania, które przydałyby się podczas pracy nad układem współrzędnych. Szczerze mówiąc, szachownica brzmi jak dobry powód, aby z niej skorzystać.

Answer 11

Bezwzględne pozycjonowanie to narzędzie, i jak każde narzędzie może być używane w dobry i zły sposób. Nie ma w tym nic złego: stackoverflow prawdopodobnie używa go do wyświetlania swoich alertów na pomarańczowym pasku u góry strony.

Teraz, w twojej sytuacji, to też nie jest złe. Ale myślę, że byłoby o wiele łatwiej, gdybyś go nie używał.

Tablica szachowa to stół, komórki tabeli nie wymagają poprawek pozycji. Dla zdarzeń, onblur/onfocus i cie wykonają zadanie. Dlaczego potrzebujesz nawet obliczenia pikseli?

Więc nie stresuj się jakością swojej praktyki, ale może możesz sprawdzić, czy naprawdę potrzebujesz pozycji absolutnej.

Answer 12

Wydaje mi się, że jestem tu jedynym, który całkowicie nie zgadza się z założeniem, że absolutne pozycjonowanie nie jest złą praktyką. Z wyjątkiem warunków takich jak animacja lub elementy, które powinny konkretnie zasiadać w "niezwykłym" miejscu, wybierać rodziców. , absolutne pozycjonowanie przerywa strukturę twojego HTML (dokładnie to jest, co HTML ma zdefiniować w mojej opinii), ponieważ możesz bardzo łatwo uzyskać wyniki, które różnią się wizualnością od struktury. Co więcej, implementacja projektu jest o wiele trudniejsza i bardziej problematyczna, ponieważ musisz zmierzyć każdy element i masz dużo miejsca do pomyłki (przy normalnym przepływie, który jest o wiele łatwiejszy i odpowiedni do budowy struktury szkieletu strony internetowej)

I wreszcie, jeśli chodzi o szachownicę, to uważam, że najtrudniejszą metodą na jej stworzenie jest użycie pozycji absolutnej! Making płyta ze stołem byłoby znacznie łatwiejsze i prawo (po tym wszystkim znajduje się tabela) ... i osobiście chciałbym zrobić z cube klasy, która miałaby float: left (z clear na każdym dziewiątym sześcianu)

Absolute Pozycjonowanie 64 różnych kwadratów jest szalone!