HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Relatív helyzetmegadás



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.

Az elmozdított HTML elemek már kilóghatnak vagy akár teljes egészében kikerülhetnek tárolóelemük területéről. Fenn áll annak a veszélye is, hogy eltakarnak más HTML elemeket.

A helyzetmegadás fajtájának beállítása:

kijelölő
{
position
:
relative;
}


1. példa:

Forráskód


<style>
  .tarolo { height:240px;  width: 200px;
          margin:5px; padding:0; 
          border:1px solid red;  
          background-color:yellow; color:blue;}   
  #Vizsgalt {position:relative; left: 10px; top: 10px;  
       background-color:#ff8888; height:100px; color:#440000; } 
  #Elotte {position:static; background-color:#8888ff; height:40px; } 
  #Utana {position:static; background-color:#88ff88; height:40px; } 
</style>     
….
<body>            
  <div class="tarolo"> Tároló elem teteje
     <div id="Elotte" >Előtte lévő elem tartalma... </div> 
     <div id="Vizsgalt"> Vizsgált elem tartalma... </div> 
     <div id="Utana" >Utána lévő elem tartalma...</div> 
     Tároló elem alja
  </div> 
</body> 

Eredmény*

2. példa:

Forráskód



Változás az előzőhöz képest:

<style>   
  #Vizsgalt {top: 10px; ....} 
....         
</style>
....
 

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_relative_02.html