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:
<div id="elem1"></div>
<div id="elem2"></div>
#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:
<div id="elem1"></div>
<div id="elem2"></div>
#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:
<div id="elem1"></div>
<div id="elem2"></div>
#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:
<div id="elem1"></div>
<div id="elem2"></div>
#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:
<div id="elem1"></div>
<div id="elem2"></div>
#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
Dané sú nasledujúce bloky:
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text
#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;
}
:
Posuňte tieto bloky pomocou relatívneho pozicionovania nasledovne:
