Pozicionimi në lidhje me prindin absolut në CSS

Në mësimin e mëparshëm pamë se, nëse prindit i caktohet relative, atëherë pasardhësit e tij do të pozicionohen absolutisht në lidhje me të. Kjo bëhet më shpesh kur nuk duhet që elementi prind të dalë nga rrjedha normale.

Mund të ndodhë që prindit t'i jetë caktuar absolute. Në këtë rast, pasardhësit me absolute gjithashtu do të pozicionohen në lidhje me këtë prind, dhe jo në lidhje me dritaren e shfletuesit:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	position: absolute;
	top: 100px;
	left: 200px;
	
	width: 500px;
	height: 300px;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 0;
	left: 0;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Krijoni një bllok katror me pozicionim absolut me madhësi 400px. Brenda tij krijoni dy blloqe të tjerë me madhësi 50px. Vendosni bllokun e parë në cepin e sipërm të djathtë të prindit, dhe bllokun e dytë - në cepin e poshtëm të majtë.