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    

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