CSS-de ata-enelerine göre pozisionirläň

Eger elemente relative berlen bolsa we onuň çagasyna - absolute, onda bu çaga öz ata-enesine garanyňda, brauzer penjiresine garanyňda däl pozisionirler.

Adatça, şeýle ýagdaýda ata-ene üçin ýer çalşyrmasyz relative görkezilýär. Bu ýagdaýda bu ata-ene bilen hiç zat bolmaýar, ýöne onuň ähli çagalary indi onuň üçin pozisionirler bolar.

Geliň mysallara seredeliň.

Mysal

Başlangyç üçin geliň diňe ata-ene bloguny ýasaýaly we çaga bloguny pozisionirlemezden:

<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;
}

Mysal

Indi geliň ýaşyl blogy absolýut pozisionirleýäli. Ata-ene üçin relative görkezilmedigi üçin, çaga brauzer penjiresine garanyňda pozisionirler:

<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;
}

Mysal

Indi ata-ene üçin relative görkezeliň. Bu ýagdaýda çaga öz ata-enesine garanyňda pozisionirler:

<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;
}

Amaly wezipeler

Aşakdaky wezipelerde esasy blog merkezde margin bahasy arkaly durýar auto, galanlary bolsa özüne garanyňda position häsiýeti arkaly pozisionirler.