Pozicionimi Absolut pa Koordinata në CSS
Në fakt, specifikimi i koordinatave gjatë pozicionimit absolut
nuk është i detyrueshëm. Nëse një elementi thjesht i shkruhet
position me vlerën
absolute, ai do të bëhet i pozicionuar absolutisht,
por do të qëndrojë në të njëjtin vend ku
ishte. Ndërkohë, të gjithë elementët e tjerë do të
sillen sikur elementi ynë nuk ekziston
dhe mund të kalojnë mbi të.
Le t'i shohim me shembuj.
Shembull
Për fillim, le të krijojmë thjesht tre blloqe pa pozicionim dhe midis tyre disa tekst:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Shembull
Tani le t'i shtojmë bllokut të gjelbër absolute.
Si rezultat, ky bllok do të mbetet në vend,
ndërsa të gjithë elementët poshtë do të sillen sikur
elementi ynë nuk ekziston dhe do të kalojnë mbi të:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Shembull
Tani le t'i shtojmë vetinë left,
pa shtuar pozicionim vertikal. Si rezultat,
horizontalisht blloku ynë do të vendoset në vlerën e specifikuar,
ndërsa vertikalisht - do të qëndrojë
atje ku ishte:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* shtojmë pozicionim horizontal */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Shembull
Tani, anasjelltas, le t'i shtojmë vetinë
top, pa shtuar pozicionim horizontal.
Si rezultat, vertikalisht blloku ynë do të vendoset
në vlerën e specifikuar, ndërsa horizontalisht -
do të qëndrojë atje ku ishte:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* shtojmë pozicionim vertikal */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
