Absoliutus elementų pozicionavimas CSS

Šioje pamokoje mes išnagrinėsime absoliutų elementų pozicionavimą. Jis leidžia išdėstyti elementus pagal nurodytas puslapio koordinates. Pavyzdžiui, galima pastatyti elementą į poziciją 100px nuo puslapio viršaus ir 200px nuo kairės. Elementas persikels ten, nepaisant to, kas ten bus išdėstyta, ir tiesiog atsidurs virš jų. Sakoma, kad tokiu atveju elementas iškrenta iš normaliojo dokumento srauto: visi kiti elementai elgsis taip, tarsi mūsų elemento nebūtų.

Kad elementas būtų absoliučiai supozicionuotas, tam elementui reikia nustatyti savybę position reikšme absolute. Be šios savybės, reikia dar dviejų: viena nustatys koordinatę vertikaliai, o antroji - horizontaliai.

Vertikaliai reikia nustatyti atstumą arba nuo viršaus, arba nuo apačios. Atstumą nuo viršaus nustato savybė top, o atstumą nuo apačios - savybė bottom. Horizontaliai reikia nustatyti atstumą arba nuo kairės, arba nuo dešinės. Atstumą nuo kairės nustato savybė left, o atstumą nuo dešinės - savybė right.

Pažiūrėkime pavyzdžiais.

Pavyzdys

Pirmiausia tiesiog sukurkime du blokus be pozicionavimo (atkreipkite dėmesį į tai, kad elementai nėra prigludę prie lango krašto, nes body pagal nutylėjimą turi margin):

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Pavyzdys

Dabar žaliam blokui nustatykime absoliutų pozicionavimą, pastatydami jį į poziciją 150px nuo viršaus ir 100px nuo kairės:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Pavyzdys

Dabar pastatykime žalią bloką į poziciją 0px nuo viršaus ir 0px nuo kairės:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Pavyzdys

Dabar pastatykime žalią bloką į poziciją 0px nuo viršaus ir 0px nuo dešinės:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Pavyzdys

Dabar pastatykime žalią bloką į poziciją 0px nuo apačios ir 0px nuo dešinės:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Pavyzdys

Dabar pastatykime žalią bloką į poziciją 0px nuo apačios ir 0px nuo kairės:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Praktinės užduotys

Naudodami absoliutų pozicionavimą, išdėstykite blokus taip: