Absolutní prvek v relativním rodiči

Vraťme se ke stránce o kočce, se vším, co jste na ní zatím udělali, a použijme absolutní pozici tak, jak se používá nejčastěji.

Umístit prvek vzhledem k celé stránce chceme jen málokdy. Mnohem častěji ho chceme dát do rohu jiného prvku: štítek na kartičku, zavírací tlačítko do rohu okna nebo popisek na fotku.

Trik spočívá v tom, že rodiči nastavíme position: relative. Bez posunů se rodič vůbec nepohne, ale stane se nejbližším předkem s pozicí. Posuny jeho potomků s position: absolute se pak měří od jeho krajů:

.karta {
	position: relative;
}

.zavrit {
	position: absolute;
	top: 10px;
	right: 10px;
}

Ať je kartička na stránce kdekoli, prvek se třídou zavrit bude 10 pixelů od jejího horního kraje a 10 pixelů od jejího pravého kraje. (Posuny se měří od vnitřní strany rámečku kartičky.)

Kartičce perské kočky jsme přidali štítek: prvek span se třídou stitek. Umístěme ho do pravého horního rohu kartičky.