Absolūtā pozicionēšana bez koordinātām CSS
Patiesībā koordinātu norādīšana absolūtās
pozicionēšanas laikā nav obligāta. Ja elementam
vienkārši noraksta position ar vērtību
absolute, tas kļūs absolūti pozicionēts,
bet paliks stāvam tajā pašā vietā, kurā
atradās. Tajā pašā laikā visi pārējie elementi
uzvedīsies tā, it kā mūsu elementa nebūtu,
un var uz tā uzkāpt.
Paskatīsimies uz piemēriem.
Piemērs
Sākumā vienkārši izveidosim trīs blokus bez pozicionēšanas un starp tiem nelielu tekstu:
<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;
}
:
Piemērs
Un tagad pievienosim zaļajam blokam absolute.
Rezultātā šis bloks paliks vietā,
bet visi elementi no apakšas uzvedīsies tā,
it kā mūsu elementa nebūtu, un uzkāps uz 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;
}
:
Piemērs
Un tagad pievienosim īpašību left,
nepievienojot pozīciju vertikāli. Rezultātā
horizontāli mūsu bloks novietosies uz norādīto
vērtību, bet vertikāli - paliks stāvam
tur, kur atradās:
<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; /* pievienojam pozīciju horizontāli */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Piemērs
Tagad, gluži pretēji, pievienosim īpašību
top, nepievienojot pozīciju horizontāli.
Rezultātā vertikāli mūsu bloks novietosies
uz norādīto vērtību, bet horizontāli -
paliks stāvam tur, kur atradās:
<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; /* pievienojam pozīciju vertikāli */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
