Relatívne pozicionovanie prvkov v CSS

Relatívne pozicionovanie sa nastavuje pomocou hodnoty relative pre vlastnosť position. Takéto pozicionovanie umožňuje posúvať prvky vzhľadom na ich aktuálnu polohu o zadanú hodnotu. Pri tom všetky ostatné prvky na stránke budú vnímať, že prvok sa nachádza na svojom pôvodnom mieste. To znamená, že pri tomto type pozicionovania prvok nevypadáva z normálneho toku.

Posuny od aktuálnej polohy sa určujú vlastnosťami top, right, bottom a left.

Príklad

Na začiatok si jednoducho vytvorme dva bloky bez pozicionovania:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Príklad

Pridajme teraz prvému bloku relative. Zatiaľ sa nič nezmení, pretože sme nešpecifikovali posun bloku:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Príklad

Poďme teraz posunúť náš blok o 30px zhora, nastavením vlastnosti top. Pri tom sa všetky ostatné prvky budú správať tak, ako keby náš blok zostal na svojom pôvodnom mieste:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Príklad

Poďme tiež posunúť náš blok o 40px zľava, nastavením vlastnosti left:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  left: 40px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Príklad

Záporné hodnoty vlastností top, right, bottom a left posúvajú v opačnom smere. Napríklad, kladná hodnota top posúva nadol, zatiaľ čo záporná posúva nahor.

Poďme posunúť náš druhý blok o 40px nahor, nastavením zápornej hodnoty vlastnosti top:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  position: relative;
  top: -40px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Praktické úlohy

html<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text

css#elem1 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #FF8888;
}
#elem2 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #7E89EB;
}
#elem3 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #4DEE99;
}