Ukotvení objektu uvnitř jiného objektu při změně rozlišení s využitím CSS vlastnosti
position
.
Např. když chcete mít logo firmy na přesném místě webové stránky.
K otestování použijte CTRL+kolečko na myši.
Horní rámeček
- bez konkrétní pozice, pouze vycentrovaný na stránce pomocí
margin: auto
(např. hlavní oddíl celé webové stránky).
Horní obrázek
- přesně umístěný na stránce (při rozlišení 1280x1024 je uvnitř rámečku) CSS vlastnostmi
top
a
left
a především pomocí
position: absolute
. Tím pádem je ale ukotvený vůči celému oknu prohlížeče, při změně rozlišení se vůči rámečku
posouvá
(a při jiném primárním rozlišení než 1280x1024 není obrázek uvnitř rámečku).
Řešení:
Dolní rámeček
- stejný jako horní rámeček (také vycentrovaný pomocí
margin: auto
), ale navíc nastavena
position: relative
.
Dolní obrázek
- také nastaveny vlastnosti
top
,
left
a
position: absolute
jako u horního obrázku, ale díky nastavení
position: relative
u dolního rámečku je již obrázek ukotvený vůči němu a při změně rozlišení se oba objekty vzájemně
neposouvají
(a obrázek je uvnitř rámečku na všech rozlišeních, tedy vždy).
Detaily ve výpisu HTML a CSS zdrojových kódů v prohlížeči.
