A position tulajdonság

A position tulajdonság határozza meg az elemek pozicionálásának módját. Ezt a tulajdonságot leggyakrabban a top, right, bottom, left tulajdonságokkal együtt használják, amelyek rendre felső, jobb, alsó és bal margót állítanak be.

Szintaxis

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

A position értékei

Alapértelmezett érték: static.

Példa . Abszolút pozicionálás

Helyezzünk el egy elemet a képernyő bal felső sarkában kis margókkal:

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

Результат:

Példa . Abszolút pozicionálás

Most pedig helyezzünk el egy elemet a képernyő jobb felső sarkában kis margókkal:

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

Результат:

Példa . Rögzített pozicionálás

Rögzített pozicionálás esetén az elem a helyén marad a görgetés során:

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

Результат:

Példa . Relatív pozicionálás

Relatív pozicionálás esetén az elem eltolódik a saját normál pozíciójához képest, de a többi elem úgy viselkedik, mintha az elem nem tolódott volna el:

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

Результат:

Példa . Beágyazottság

Ha a szülő position tulajdonságának értéke relative, akkor az abszolút pozicionált elemek a szülőhöz képest pozicionálódnak:

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

Результат:

Példa . Beágyazottság

Ha a szülő position tulajdonságának értéke absolute, akkor az abszolút pozicionált elemek a szülőhöz képest pozicionálódnak:

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

Результат:

Példa . Ragadós pozicionálás

Ha egy elem position tulajdonságának értéke sticky, akkor az elem úgy viselkedik, mint a relative, amíg el nem éri a megadott pozíciót a görgetés során, majd utánna a helyhez ragad. Készítsünk egy ragadós fejlécet:

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

Результат:

Példa . Pozíció nélkül

Ha egy elemnek abszolút pozicionálást adunk meg pozíció megadása nélkül, akkor az elem azon a helyen marad, ahol pozicionálás nélkül volt, de a többi elem nem veszi észre a jelenlétét:

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

Результат:

Példa . Egy tengely

Abszolút pozicionálás esetén megadhatjuk a pozíciót csak egy tengely mentén. Például, ha megadjuk a top tulajdonságot, akkor függőlegesen az elem a kívánt pozícióba kerül, vízszintesen pedig azon a helyen marad, ahol eredetileg volt:

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

Результат:

Példa . Minden pozíció

Abszolút pozicionálás esetén megadhatjuk a pozíciót mindegyik oldalról, szélesség és magasság megadása nélkül. Ebben az esetben az elem a szülői blokk közepébe kerül:

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

Результат:

Lásd még