MENÜ
TOVÁBBStatikus helyzetmegadás (static)
Alapértelmezett. A HTML elem a szövegfolyamban eredeti helyén marad.
Relatív helyzetmegadás (relative)
A HTML elemet egy általunk megadott értékkel eltolhatunk az eredeti helyzetéhez képest, de továbbra is a szövegfolyamban marad.
A top, left, bottom, right tulajdonságok értékeivel pozícionálhatjuk.
Független helyzetmegadás (absolute)
A HTML elem helyzete teljesen független a szövegfolyamtól. Helyzetét azon tárolótömbjéhez viszonyítva adhatjuk meg, amely a dokumentumfán az utolsó relatív helyzetmegadású őse az elemnek. Ha ilyen nincs akkor a body elemhez képest.
A top, left, bottom, right tulajdonságok értékeivel pozícionálhatjuk.
Rögzített helyzetmegadás (fixed)
A böngészőablak látható részéhez rögzített lesz a HTML elem, és így mindig látható marad. A független helyzetmegadás speciális esete, ahol a képernyő a viszonyítási pont.
A top, left, bottom, right tulajdonságok értékeivel pozicionálhatjuk.
A helyzetmegadás fajtájának beállítása:
kijelölő
{
position
:
kulcsszó;
}
Példa:
Forráskód
<style>
.tarolo { height:100px; width: 200px;
margin:1px; padding:0; margin-left:80px;
border:1px solid red;
background-color:yellow; color:blue;}
.Statikus {position:static;}
.Relativ {position:relative;
left:10px; top:10px;}
.Fuggetlen {position:absolute;
left:1px; top:10px;}
.Rogzitett {position:fixed;
left:1px; top:40px;}
</style>
….
<body>
<div class="tarolo"> Az elem a szövegfolyam
<div class="Statikus" >Statikus </div>
része marad.
</div>
<div class="tarolo"> Az elem a szövegfolyam
<div class="Relativ"> Relativ </div>
része marad, de eltolódik.
</div>
<div class="tarolo"> Az elem a függetlenné válik
<div class="Fuggetlen"> Fuggetlen </div>
szövegfolyamtól.
</div>
<div class="tarolo"> Az elem mindig a képernyő
<div class="Rogzitett"> Rogzitett </div>
meghatározott helyén marad.
</div>
</body>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_position_2.html