Z-index avagy a 3. dimenzió

Az egymást takaró elemek láthatóságát alapértelmezetten a HTML-kódban elfoglalt sorrendjük határozza meg. A kódban később található HTML elem eltakarja az előzőeket.

A láthatósági sorrend módosítható a z-index tulajdonság segítségével. A z-index növelésével adott elem (a z-tengely mentén) közelíthető a látogató felé. Eltakarja a kisebb z-indexszel rendelkező elemeket.

A z-index csökkentésével az adott elem távolítható. Ilyenkor a többi elem takarásába kerül.

A z-index beállítása

kijelölő

{

z-index

érték;

}

1. példa:

A sorrend hatása 1.

Forráskód

<style>
  #Elso {position:absolute; left: 10px; top: 0;
              height:100px; width: 150px; }      
  #Masodik {position:absolute; left: 40px; top: 30px;  
              height:100px; width: 150px;} 
  #Harmadik {position:absolute; left: 70px; top: 60px;
              height:100px; width: 150px; } 
</style>     
...
<body>            
  <div class="tarolo"> 
    <div id="Elso" >Első elem </div> 
    <div id="Masodik">Második elem </div> 
    <div id="Harmadik" >Harmadik elem..</div> 
  </div>   
</body>

Eredmény*

2. példa:

A sorrend hatása 2.

Forráskód

<style>
  #Elso {position:absolute; left: 10px; top: 0;
              height:100px; width: 150px; }      
  #Harmadik {position:absolute; left: 40px; top: 30px;  
              height:100px; width: 150px;} 
  #Masodik {position:absolute; left: 70px; top: 60px;
              height:100px; width: 150px; } 
</style>     
...
<body>            
  <div class="tarolo"> 
    <div id="Elso" >Első elem </div> 
    <div id="Masodik">Második elem </div> 
    <div id="Harmadik" >Harmadik elem..</div> 
  </div>   
</body>

Eredmény*

3. példa:

A z-index hatása 1.

Forráskód


Változás az 1. példához képest:
<style>
  #Elso { z-index: 1; ... }      
  #Masodik { z-index: 2; ... } 
  #Harmadik {z-index: 3; ...}                              
</style>     
….

Eredmény*

4. példa:

A z-index hatása 2.

Forráskód


Változás az 1. példához képest:
<style>
  #Elso { z-index: 1; ... }      
  #Masodik { z-index: 3; ... } 
  #Harmadik {z-index: 2; ...}                              
</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_absolute_zindex_04.html