Pozicionimi Absolut i Elementeve në CSS

Në këtë mësim do të shqyrtojmë pozicionimin absolut të elementeve. Ai lejon vendosjen e elementeve sipas koordinatave të specifikuara të faqes. Për shembull, mund të vendosni një element në pozicion 100px nga lartë e faqes dhe 200px nga e majta. Elementi do të lëvizë atje, pavarësisht nga elementi të tjerë që mund të jenë aty dhe thjesht do të vendoset mbi ta. Thuhet se në këtë rast elementi del nga rrjedha normale e dokumentit: të gjithë elementët e tjerë do të sillen sikur elementi ynë nuk është aty.

Për ta bërë një element të pozicionuar në mënyrë absolute, ky element duhet t'i caktohet vetia position me vlerën absolute. Përveç kësaj vetie, nevojiten edhe dy të tjera: njëra do të caktojë koordinatën vertikale, dhe tjetra - horizontale.

Për vertikalen duhet caktuar një zhvendosje ose nga lartë, ose nga poshtë. Zhvendosjen nga lartë e cakton vetia top, ndërsa zhvendosjen nga poshtë - vetia bottom. Për horizontale duhet caktuar një zhvendosje ose nga e majta, ose nga e djathta. Zhvendosjen nga e majta e cakton vetia left, ndërsa zhvendosjen nga e djathta - vetia right.

Le të shohim me shembuj.

Shembull

Për fillim, le të bëjmë thjesht dy blloqe pa pozicionim (kushtojini vëmendje faktit që elementët nuk janë ngjitur në skaj të dritares, meqenëse body ka margin si parazgjedhje):

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

Shembull

Tani le t'i caktojmë bllokut të gjelbër pozicionim absolut, duke e vendosur atë në pozicion 150px nga lartë dhe 100px nga e majta:

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

Shembull

Tani le ta vendosim bllokun e gjelbër në pozicion 0px nga lartë dhe 0px nga e majta:

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

Shembull

Tani le ta vendosim bllokun e gjelbër në pozicion 0px nga lartë dhe 0px nga e djathta:

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

Shembull

Tani le ta vendosim bllokun e gjelbër në pozicion 0px nga poshtë dhe 0px nga e djathta:

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

Shembull

Tani le ta vendosim bllokun e gjelbër në pozicion 0px nga poshtë dhe 0px nga e majta:

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

Detyra Praktike

Duke përdorur pozicionimin absolut, vendosni blloqet si më poshtë: