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    

Statikus helyzetmegadás



Statikus helyzetmegadás (static)


Alapértelmezett. A HTML elem a szövegfolyamban az eredeti helyén marad. Helyzetét a HTML kódban elfoglalt helye határozza meg.

A HTML elemek közötti távolság a külső margók beállításával szabályozható.

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

kijelölő
{
position
:
static;
}


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:static; height:100px; 
        background-color:#ff8888; 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 {margin: 20px; ....} 
....         
</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_static_01.html