Pozicionimi në lidhje me prindin në CSS

Nëse një elementi ka relative, dhe pasardhësi i tij - absolute, atëherë ky pasardhës do të pozicionohet në lidhje me prindin e tij, dhe jo në lidhje me dritaren e shfletuesit.

Zakonisht, në këtë rast prindit i caktohet relative pa zhvendosje. Në këtë rast me këtë prind nuk ndodh asgjë, por të gjithë pasardhësit e tij tani do të pozicionohen në lidhje me të.

Le të shohim me shembuj.

Shembull

Për fillim, le të krijojmë një bllok-prind dhe një bllok-pasardhës pa pozicionim:

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

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Shembull

Tani le ta pozicionojmë absolutisht bllokun e gjelbër. Meqë prindit nuk i është caktuar relative, pasardhësi do të pozicionohet në lidhje me dritaren e shfletuesit:

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

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

Shembull

Tani le t'i caktojmë prindit relative. Në këtë rast pasardhësi do të pozicionohet në lidhje me prindin e tij:

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

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

Detyra praktike

Në detyrat e mëposhtme, blloku kryesor është në qendër me anë të margin me vlerë auto, ndërsa të tjerët pozicionohen në lidhje me të me anë të vetisë position.