CSS-də mənfi mövqeləndirmə dəyərləri
Öyrəndiyimiz top, right,
bottom və left xassələri
təkcə müsbət deyil, həm də mənfi
dəyərlər qəbul edə bilər. Gəlin nümunələrlə baxaq.
Nümunə
Aşağıdakı nümunədə element valideyninə nisbətən
mütləq mövqeləndirilir və yuxarıdan 0,
soldan 0 mövqeyində yerləşir:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Nümunə
İndi isə gəlin elementi yuxarıdan -20px,
soldan -30px mövqeyinə hərəkət etdirək:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: -20px;
left: -30px;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Aşağıdakı nüsxədə yaşıl blok margin
vasitəsilə ekranın mərkəzində yerləşir,
qırmızı bloklar isə ona nisbətən
mövqeləndirilir. Səhifəni verilmiş nüsxəyə
əsasən təkrarlayın:
