Vlastnosť position

Vlastnosť position určuje spôsob pozicionovania prvkov. Táto vlastnosť sa najčastejšie používa spolu s vlastnosťami top, right, bottom, left, ktoré nastavujú odsadenia zhora, sprava, zdola, zľava.

Syntax

cssselektor {
  position: absolute | relative | fixed | static | sticky;
}

Hodnoty pre position

Predvolená hodnota: static.

Príklad . Absolútne pozicionovanie

Umiestnime prvok do ľavého horného rohu obrazovky s malými odsadeniami:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

Príklad . Absolútne pozicionovanie

A teraz umiestnime prvok do pravého horného rohu obrazovky s malými odsadeniami:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  right: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

Príklad . Fixné pozicionovanie

Pri fixnom pozicionovaní bude prvok zostávať na mieste pri posúvaní:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: fixed;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

Príklad . Relatívne pozicionovanie

Pri relatívnom pozicionovaní sa prvok posúva vzhľadom na svoju normálnu polohu, ale ostatné prvky sa správajú tak, ako keby sa prvok neposunul:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  display: flex;
  justify-content: flex-row;
}

.elem {
  margin: 0 3px;
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

.elem2 {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: #e6addf;
}

Результат:

Príklad . Vnorenie

Ak má rodič vlastnosť position s hodnotou relative, potom sa absolútne pozicionované prvky budú pozicionovať vzhľadom na rodiča:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

Príklad . Vnorenie

Ak má rodič vlastnosť position s hodnotou absolute, potom sa absolútne pozicionované prvky budú pozicionovať vzhľadom na rodiča:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: absolute;
  top: 30px;
  left: 30px;
  
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

Príklad . Lepivé pozicionovanie

Ak má prvok vlastnosť position s hodnotou sticky, potom sa prvok správa ako relative, kým nedosiahne zadanú polohu pri posúvaní, potom sa prilepí na miesto. Vytvorme lepivú hlavičku:

html<h1>Main Site Header</h1>

<div class="header">header header header</div>

<div class="main">
  some long text
</div>

cssh1 {
  text-align: center;
}

.header {
  position: sticky;
  top: 0;
  
  padding: 20px;
  background: #f0f0f0;
  text-align: center;
  font-weight: bold;
}

.main {
  width: 400px;
  margin: 20px auto;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: justify;
}

Результат:

Príklad . Bez pozície

Ak sa prvku zadá absolútne pozicionovanie bez určenia pozície, potom prvok zostane stáť na mieste, kde stál bez pozicionovania, ale ostatné prvky ho prestanú vnímať:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

Príklad . Jedna os

Pri absolútnom pozicionovaní je možné zadať pozíciu len pozdĺž jednej osi. Napríklad, ak zadáme vlastnosť top, potom sa zvisle prvok umiestni do požadovanej polohy, a vodorovne zostane stáť, tam, kde stál:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  top: 20px;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

Príklad . Všetky pozície

Pri absolútnom pozicionovaní je možné zadať pozície zo všetkých strán, bez zadania šírky a výšky. V tomto prípade sa prvok umiestni do stredu nadradeného bloku:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: #add8e6;
}

Результат:

Pozri tiež