Relativní pozicování trápí začátečníky

„Obecně doporučené použití relativní polohy neexistuje, používá se většinou jako taková legrácka.“
Tak se praví na stránce CSS pozicování. Je to pravda, ale moc nenápadná pravda. Myslím, že by si zasloužila samostatnou podkapitolku, možná i vlastní stránku (podobně jako mají problémy rámů).

Sestavit layout absolutním pozicováním nějak jde. Mnoho lidí si kupodivu myslí, že to jde i relativním. Začátečník nejspíš prochází následujícím myšlenkovým procesem:
1) Potřebuji mít na stránce obsah vedle menu. Jak to udělat?
   — Před pár lety by se mrknul na nějaký známý web a řekl by si „aha, tabulkou!“ — teď už těžko.
2) Musím to udělat přes <div>y a přes CSS. No jo, ale <div>y mám pořád pod sebou, i když jim nastavím šířku. Potřebuji nějak nastavit polohu… určit pozici…
   — Jen jasnovidce v této fázi napadne hledat pojem „plavání“.
3) Jé, absolutní pozicování vypadá slibně, stačí nastrkat obdélníčky na správná místa. Ale proč to vypadá na jiném počítači jinak?
   — Protože layout centruje a jeho obal nemá position: relative, pozicuje tedy od rohu prohlížeče.
4) Potřebuji pozicovat relativně k centrování => použiju relative. Jen musím trochu poštelovat left a top.
   — Pokud nemá levý sloupec pevnou výšku, vznikne samozřejmě docela křehká konstrukce.
5) Proč mám najednou pod stránkou takový průvan? Zeptám se na diskusi, nebo se utrápím k smrti.
   … a jestli se nezeptal a neumřel, trápí se dodnes.

Pokročilejší začátečníci už vědí, jak si ukuchtit layout, nebo jak si ho vykuchat z existující stažené šablony, nicméně při pokusu o nějaké drobné rozšíření/doplnění své stránky také mnohdy nasednou do špatného vlaku (konkrétně v bodě 3) a vyrobí si průvan někde jinde. Zkoumat pak, který ze stovek elementů způsobuje u stránky nadbytečný vodorovný posuvník, je docela výzva.

Třetím pozicovaným zázrakem, který se občas zjeví na diskusi, je naprosto zbytečné použití relativního pozicování tam, kde by mnohem lepší práci odvedl margin nebo padding. Ono to sice ve výsledku často vypadá stejně a třeba to i funguje bez problémů, nicméně margin je přirozenější — a kdo ho zná, ten ho užívá. Několikrát jsem tu již viděl pokus o vyrovnání výchozího marginu/paddingu u seznamů záporným relativním leftem.

Myslím, že by na JPW mělo být (ideálně i u popisu vlastnosti position) důrazné varování, že postrkávání pomocí relativního pozicování obvykle způsobí víc problémů než vyřeší. Jediné, k čemu se position: relative v praxi hodí, je reset souřadnicového systému pro absolutní pozicování a přerovnávání z-indexů. Někdy se ještě hodí k opravám (nebo vytvoření) chyb v Exploreru.

Reaguji na Yuhůa:
„Zároveň ale budu muset i přepsat hodně starších věcí, tak proto se na to tak "odhodlávám".“
Na stránce o pozicování je teď také psáno, že „ani ty nejnovější prohlížeče nepodporují CSS-P bezchybně; špatně je na tom zejména Navigator 4“, a o kousek níž je zmiňován Chrome i Explorer 7, což dohromady dává docela roztříštěnou představu o historii. Nicméně je dobré, že alespoň část té stránky byla v posledním desetiletí aktualizovaná.

Budeš-li se k úpravám odhodlávat příliš dlouho, stane se tradičním doskočištěm tápajících relativně pozicujících začátečníků toto vlákno. Během dvaceti dní existence už na DJPW získalo šest zpětných odkazů => za devět tisíc let jich bude mít skoro milion. Škoda každého milionu, který padne vedle.


Reaguji na Trejpu:
„Když ne absolutním, tak jakým? Zbývá jim relativní (a pak to tak vypadá).“
Možná jednou vznikne ještě jedno naprosto nesouvisející, aby to klíčové slovo position bylo pořádně využité.

Reaguji na Františka Hlivu:
„Relatívne pozícovanie v nadradenom elemente nastaví relatívnu pozíciu ako východziu pozíciu“
To již zmiňuji jako oprávněné použití. Upozorňoval jsem na problematické kombinace s left, top, right, bottom, které začátečníkům zdánlivě pomáhají.

„pritom pomocou pozíciovania sa dá Layout krásne zjednodušiť“
Absolutně pozicované layouty mají docela zásadní problém s výškami — pokud neznáš výšku bloků (a tu u víceslovných textových bloků prakticky nikdy neznáš), nemůžeš napozicované elementy dávat s jistotou pod sebe.

Nicméně otázka využití absolutního pozicování a/nebo plavání je zde mimo téma. Chceš-li rozebírat postupy konstrukce layoutu nesouvisející s relativním pošoupáváním elementů, založ si prosím vlastní vlákno.