Abszolút pozicionálás koordináták nélkül CSS-ben
Valójában nem kötelező koordinátákat megadni az abszolút
pozicionálásnál. Ha egy elemnek egyszerűen csak beállítjuk a
position tulajdonságot absolute értékre,
akkor abszolútán pozicionálttá válik,
de ugyanazon a helyen marad, ahol
volt. Eközben az összes többi elem úgy fog
viselkedni, mintha az elemünk nem lenne ott,
és rámereszthetnek.
Nézzük meg példákon.
Példa
Kezdetként készítsünk hárm blokkot pozicionálás nélkül, és közéjük egy kis szöveget:
<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;
}
:
Példa
Most adjuk a zöld blokknak a absolute értéket.
Ennek eredményeképpen ez a blokk a helyén marad,
de az alatta lévő elemek úgy fognak viselkedni,
mintha az elemünk nem lenne ott, és rámeresztenek:
<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;
}
:
Példa
Most adjuk hozzá a left tulajdonságot,
vízszintes pozíció hozzáadása nélkül. Ennek eredményeképpen
vízszintesen az elemünk az megadott
értékre kerül, függőlegesen pedig a helyén marad,
ahol volt:
<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; /* vízszintes pozíció hozzáadása */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Példa
Most pedig adjuk hozzá a top tulajdonságot,
vízszintes pozíció hozzáadása nélkül.
Ennek eredményeképpen függőlegesen az elemünk a megadott
értékre kerül, vízszintesen pedig
a helyén marad, ahol volt:
<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; /* függőleges pozíció hozzáadása */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
