VISSZA
MENÜ
TOVÁBBRelatív helyzetmegadás (relative)
A HTML elemet egy általunk megadott értékkel eltolhatunk az eredeti helyzetéhez képest, de továbbra is a szövegfolyamban marad.
A top, left, bottom, right tulajdonságok értékeivel pozícionálhatjuk.
Az elmozdított HTML elemek már kilóghatnak vagy akár teljes egészében kikerülhetnek tárolóelemük területéről. Fenn áll annak a veszélye is, hogy eltakarnak más HTML elemeket.
A helyzetmegadás fajtájának beállítása:
kijelölő
{
position
:
relative;
}
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:relative; left: 10px; top: 10px;
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:
Forráskód
Változás az előzőhöz képest:
<style>
#Vizsgalt {top: 10px; ....}
....
</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_relative_02.html