Absoluuttinen positioiminen ilman koordinaatteja CSS:ssä
Itse asiassa koordinaattien määrittäminen absoluuttisessa
positioimisessa ei ole pakollista. Jos elementille
kirjoitetaan yksinkertaisesti position arvona
absolute, siitä tulee absoluuttisesti positioitu,
mutta se pysyy samassa paikassa, missä
se oli. Samalla kaikki muut elementit käyttäytyvät
kuin elementtiämme ei olisi
ja voivat päällekäin sen kanssa.
Katsotaanpa esimerkein.
Esimerkki
Aluksi tehdään kolme lohkoa ilman positiointia ja niiden välissä vähän tekstiä:
<div id="elem1"></div>
<div id="elem2"></div>
tekstiä tekstiä tekstiä tekstiä tekstiä
<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;
}
:
Esimerkki
Nyt lisätään vihreälle lohkolle absolute.
Tuloksena tämä lohko pysyy paikallaan,
ja kaikki alapuoliset elementit käyttäytyvät kuin
elementtiämme ei olisi ja menevät sen päälle:
<div id="elem1"></div>
<div id="elem2"></div>
tekstiä tekstiä tekstiä tekstiä tekstiä
<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;
}
:
Esimerkki
Nyt lisätään left-ominaisuus,
lisäämättä pystysuuntaista positiota. Tuloksena
vaakasuunnassa lohkomme siirtyy määritettyyn
arvoon, ja pystysuunnassa - pysyy paikallaan
siinä, missä se oli:
<div id="elem1"></div>
<div id="elem2"></div>
tekstiä tekstiä tekstiä tekstiä tekstiä
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* lisätään vaakasuuntainen positio */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Esimerkki
Nyt päinvastoin, lisätään top-ominaisuus,
lisäämättä vaakasuuntaista positiota.
Tuloksena pystysuunnassa lohkomme siirtyy
määritettyyn arvoon, ja vaakasuunnassa -
pysyy paikallaan siinä, missä se oli:
<div id="elem1"></div>
<div id="elem2"></div>
tekstiä tekstiä tekstiä tekstiä tekstiä
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* lisätään pystysuuntainen positio */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
