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ä:

html<div id="elem1"></div>
<div id="elem2"></div>
tekstiä tekstiä tekstiä tekstiä tekstiä
<div id="elem3"></div>

css#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:

html<div id="elem1"></div>
<div id="elem2"></div>
tekstiä tekstiä tekstiä tekstiä tekstiä
<div id="elem3"></div>

css#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:

html<div id="elem1"></div>
<div id="elem2"></div>
tekstiä tekstiä tekstiä tekstiä tekstiä
<div id="elem3"></div>

css#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:

html<div id="elem1"></div>
<div id="elem2"></div>
tekstiä tekstiä tekstiä tekstiä tekstiä
<div id="elem3"></div>

css#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;
}

Результат: