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    

Független helyzetmegadás (absolute)



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.

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

kijelölő
{
position
:
absolute;
}


1. példa:

A tárolótömb nem relatív helyzetmegadású.
A független helyzetmegadású elem pozicionálása a body elemhez képest történik.

Forráskód


<style>
  .tarolo { height:240px;  width: 200px;
      margin:10px; padding:0; 
      border:1px solid red;  
      background-color:yellow; color:blue;}
  #Vizsgalt {position:absolute; left: 110px; top: 0;  
      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:

A tárolótömb relatív helyzetmegadású.

Forráskód



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

<style>   
  .tarolo {position:relative; ....} 
....         
</style>
....
 

Eredmény*

3. példa:

Egy relatív helyzetmegadású tárolótömbben több független helyzetmegadású HTML elem.

Forráskód



<style>
  .tarolo { height:240px;  width: 200px; position:relative;
        margin:10px; padding:0; 
        border:1px solid red;  
        background-color:yellow; color:blue;}   
  #Elotte {position:absolute; left: 10px; top: 0;
       background-color:#8888ff; height:50px; width: 150px; }   
  #Vizsgalt {position:absolute; left: 40px; top: 20px;  
      background-color:#ff8888; height:50px; width: 150px; 
      color:#440000; } 
  #Utana {position:absolute; left: 70px; top: 40px;
      background-color:#88ff88; height:50px; width: 150px; } 
</style>     
….
<body>            
  <div class="tarolo"> 
    <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> 
  </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_absolute_03.html