CSS-də koordinatsız mütləq mövqeləndirmə
Əslində, mütləq mövqeləndirmədə koordinatları
göstərmək mütləq deyil. Əgər elementə sadəcə
position xassəsini absolute
qiymətində təyin etsəniz, o, mütləq mövqelənmiş
olacaq, lakin olduğu yerdə qalacaq. Bununla
belə, digər bütün elementlər bizim elementin
olmaması kimi davranacaq və onun üzərinə düşə bilər.
Gəlin nümunələrlə baxaq.
Nümunə
Əvvəlcə gəlin sadəcə üç blok və onların arasında bir mətn yaradaq, heç bir mövqeləndirmə olmadan:
<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;
}
:
Nümunə
İndi isə gəlin yaşıl bloka absolute əlavə edək.
Nəticədə bu blok olduğu yerdə qalacaq,
aşağıdakı bütün elementlər isə bizim elementin
olmaması kimi davranacaq və onun üzərinə düşəcək:
<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;
}
:
Nümunə
İndi gəlin şaquli mövqeyi əlavə etmədən,
left xassəsini əlavə edək. Nəticədə
blokumuz üfüqi olaraq göstərilən qiymətə
keçəcək, şaquli olaraq isə olduğu yerdə qalacaq:
<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; /* üfüqi mövqe əlavə edirik */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Nümunə
İndi isə, əksinə, üfüqi mövqeyi əlavə etmədən,
top xassəsini əlavə edək. Nəticədə
blokumuz şaquli olaraq göstərilən qiymətə
keçəcək, üfüqi olaraq isə olduğu yerdə qalacaq:
<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; /* şaquli mövqe əlavə edirik */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
