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
szelektor {
position: absolute | relative | fixed | static | sticky;
}
A position értékei
| Érték | Leírás |
|---|---|
absolute |
Abszolút pozicionálás. Az elem eltávolításra kerül a dokumentum normál folyásából és a legközelebbi pozicionált őshez (ha van) képest pozicionálódik, vagy a böngészőablakhoz képest. |
relative |
Relatív pozicionálás. Az elem eltolódik a saját normál pozíciójához képest a dokumentum folyásában, de az általa eredetileg elfoglalt hely megmarad. |
fixed |
Rögzített pozicionálás. Az elem eltávolításra kerül a dokumentum normál folyásából és a böngészőablakhoz képest pozicionálódik. A helyén marad az oldal görgetése során. |
static |
Statikus pozicionálás. Ez az érték azt jelenti, hogy nincs pozicionálás, és az elem a szokásos módon viselkedik. |
sticky |
Ragadós pozicionálás.
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 megadott helyhez ragad
(mint a fixed).
|
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:
<div class="elem"></div>
<div class="main">
some long text
</div>
.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:
<div class="elem"></div>
<div class="main">
some long text
</div>
.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:
<div class="elem"></div>
<div class="main">
some long text
</div>
.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:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.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:
<div class="container">
<div class="elem"></div>
</div>
.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:
<div class="container">
<div class="elem"></div>
</div>
.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:
<h1>Main Site Header</h1>
<div class="header">header header header</div>
<div class="main">
some long text
</div>
h1 {
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:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.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:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.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:
<div class="container">
<div class="elem"></div>
</div>
.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
-
a
z-indextulajdonság,
amely az elemek egymásra helyezését szabályozza
