ipsace i tiskace

Typickým příkladem je, chcete-li objekt umístit pod pevný obrázek, pod nímž je ještě menu. Nejlépe to uvidíte zde na blogu, na kulaťoučkém stylu. Vlevo je sloupec, který je absolutně posicovaný. Absolutní posicování je použito proto, aby mohl obsah tohoto sloupce být až na fysickém konci souboru, a načetl se tak až naposled, hlavní obsah se načte nejdříve.

Tento sloupec má id="navigace", bloky v něm jsou řazeny pod sebou normálním tokem sloupce. Posledním blokem ve sloupci je blok Archivy. Možná se mě zeptáte, proč jsem nepoužil plovoucí bloky? Protože kdybych udělal menu plovoucí, muselo by se načítat jako prvni, kdybych použil plovoucí hlavní obsah, otřásl bych se hnusem nad tou prasárnou, je víc důvodů, proč. Jeden z nich je ten, že stránka by končila vysoko nad jeho koncem. Prostě ne.

Takže jediné řešení je absolutně posicovaný sloupec. Ten ale končí archívy. A jak mám pod tento sloupec ještě něco umístit (navig2), aby mezera nad tím byla "tak akorát"? Problém totiž nastává, pokud si uživatelka změní velikost písma. Výška levého sloupce "navigace" se tím mění. Takže nelze použít absolutní jednotky.

Zkusíme tedy jednotky relativní, závisející na velikosti písma, čili em. (Zobrazte si zdrojový kód toho "em"!) Po několikerém zvětšení a zmenšení písma zjistíte, že sladká štěrbinka se rozšiřuje do extrémních hodnot, pokud písmo zvětšíte. Při zmenšení písma se sevře jako kleště.

Důvodem je to, že dolní konec bloku nad štěrbinou se nepohybuje přímo úměrně velikosti písma, ale je posunut o určitou konstantu. Ta je způsobena neměnným obrázkem nahoře a všemi paddingy a marginy uvnitř sloupce, které jsou zadány v absolutních jednotkách.

Potřebovali bychom něco jako toto: navig2 {position: absolute; top: 60em + 400px:} Jenže takový zápis je nepřípustný.

Řešení je překvapive jednoduché a možná jsem zase "objevil ameriku", protože to všichni dávno používáte. Ale opakování je matka moudrosti:
Použijeme navíc jeden obalový div, do kterého náš objekt umístíme. Obalový div (zde "nav2ex") má absolutní posicování, které je rovno součtu všech pixelových marginů a paddingů plus výška horního obrázku.
Dovnitř tohoto divu absolutně naposicujeme původní objekt v relativních souřadnicích em, odpovídajících textu.

Tedy součet hodnot jednoho prvku jsme nahradili dvěma prvky, každý s jedním sčítancem. Jak prosté, milý Watsone!

Zajímavé je, že zde nevznikly žádné problémy se sklem. Ale jelikož se jedná o všechny objekty absolutně posicované, stačilo by si pohrát se z-indexem

Vážení webmistři, kteří tyhle finty znáte už od školky, přestaňte se blahosklonně usmívat. Naopak, enjoy!