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 pozicioná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