Absolutní pozice
U relativní pozice jsme mohli prvek odsadit a ostatní prvky byly stále umístěné jako kdyby byl odsazený prvek bez odsazení.
U prvku s absolutní pozicí (position: absolute;
) ho budou ostatní prvky ignorovat. Co je tím myšleno uvidíte na příkladu. Jinak mu odsazení nastavujeme stejně jako u relativní pozice (zleva - left
, zprava - right
, shora - top
, zespodu - bottom
) s jedinou změnou, že ho neodsazujeme od jeho statické pozice, ale odsazujeme ho od prvního rodiče, co má pozici (position
) jinou než statickou (static
).
Pokud žádný rodič nemá pozici jinou než statickou, tak se odsadí od stránky. Například:
.utvar {
position: absolute;
left: 200px;
top: 100px;
}
Pokud prvek se třídou utvar
má jen rodiče se statickou pozicí, tak budu odsazen o 200px zleva stránky a 100px shora stránky.
Pokyny
Změňte prvku s id ctverec2 (#ctverec2
) pozici (position
) na absolutní (absolute
) a nastavte odsazení shora (top
) na 200 pixelů a odsazení zleva (left
) na 0 pixelů.
Všimněte si, že 3. čtverec nyní ignoruje 2. čtverec a tím pádem se přesunul na jeho místo.
Začněte programovat zdarma
7/10