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

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


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