logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
menüMENÜ   

A helyzetmegadás fajtái



Statikus 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


Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.