Částečně určená poloha

Neobvyklé umístění nadpisů

Pokud absolutně umístěnému prvku neurčíte jeho vodorovnou či svislou polohu, ponechá si tu, na níž by se na stránce vyskytl v normálním toku. Tato vlastnost je využita například zde u nadpisů úrovně <h2> nezvykle vystrčených mimo text.

Chování tak poněkud připomíná prvky umístěné relativně. Je tu ale podstatný rozdíl – po relativně umístěném prvku by na jeho původním místě zůstala prázdná plocha, zatímco prvek umístěný absolutně ze svého místa zmizí. Jistě si lze představit, že místo nadpisů budou do levého okraje vystrčeny třeba navigační ikony upozorňující na důležitá či nebezpečná místa v textu, jak se dnes běžně dělává.

Jak je to uděláno

Především je třeba vynechat na stránce široký okraj, do nějž bude materiál vystrkován. To zajistí pravidlo

body { padding-left: 30%; }

O zbytek se postará definice vzhledu prvku <h2>:

h2 {
    position: absolute;
    left: 0;
    width: 25%;
    padding: 2%;
    background-color: #800;
    color: #ffa;
    font: bold 1.2em sans-serif;
}

Klíčové jsou v ní první dva řádky. Stanoví, že prvek je umístěn absolutně a předepisují mu pouze vodorovné umístění. Jelikož není obklopen žádným mimořádně umístěným prvkem, vztahuje se poloha k celé stránce, čili bude umístěn až k jejímu levému okraji. Svislá poloha není určena, takže zůstane beze změny. Díky tomu se nadpis ze „své“ pozice pouze posune doleva. Zbývající vlastnosti jen pilují vzhled – šířku bloku, barvy.

zpět: CSS – absolutní umístění