Az elhelyezés típusát kiválaszthatjátok egy terület vagy elem számára. Erre a position-tulajdonságot használjuk. Ez a tulajdonság meghatározza, hogy egy elemet végül hogyan kell elhelyezni. Összesen négy különböző elhelyezési változat közül lehet választani.
• static – nem történik speciális elhelyezés, és a szöveg normál folyása megtörténik.
• relative – egy relatív elhelyezés történik, amely az elem normál vagy kezdő pozíciójához igazodik.
• absolute – egy abszolút elhelyezés történik a felső, alsó, bal és jobb tulajdonságokon keresztül. Az abszolút pozícióban lévő elemek a normál szövegfolyamon kívül helyezkednek el. Az abszolút pozíció relatív az őselem széleihez képest (de csak ha az nem rendelkezik statikus pozícióval).
• fixed – az elem abszolút el van helyezve. Az elem gördítésekor az elem álló helyzetben marad.
Az első két változat változó elhelyezést tesz lehetővé. Itt az elemek egymáshoz viszonyítva kerülnek elhelyezésre. Az alábbi két példa mutatja, hogyan nézhet ki ez az elhelyezési mód:
• Az 1. elemet 30 képponttal eltoljuk az 1. elemhez viszonyítva.
• Az 1. elem mögé helyezzük az 1. elemet.
Ez másképp működik az abszolút és a statikus esetében. Ezek segítségével az elemeket nagyon konkrét helyekre lehet helyezni. Az elhelyezési intézkedések az őselemre vagy a böngészőablak-ra vonatkoznak. Egy példa:
• Az 1. elemet pontosan 30 képponttal a böngészőablak jobb és 20 pixellel a felső szélén helyezzük el.
A különböző elhelyezési változatokat az alábbiakban részletesen ismertetjük. Azonban előtte egy megjegyzés: Az elemek elhelyezésével kapcsolatban a lebegés (float) nevű fontos CSS-elv játszik szerepet. Ezt az fontos CSS-elvet a következő oktatóanyagban részletesen tárgyalom. Alapvetően a lebegés lényege az elemek weboldalon való áramlása. Az elemeket a lehető legmesszebb tolják a megfelelő irányba. Az elhelyezési módnak köszönhetően határozható meg az elemáramlás explicit módon.
Az eltolásos elhelyezés
A relatív elhelyezés használatával a position: relative segítségével két dolog történik:
• A doboz kikerül normál folyásából.
• Az elem eredeti helye fenntartásra kerül.
Az eredeti hely fenntartásával a többi elem úgy viselkedik, mintha az elem ténylegesen még mindig a helyén lenne.
Egy példa:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: relative;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Doboz 1</div>
<div>Doboz 2</div>
<div>Doboz 3</div>
</body>
</html>Három dobozt definiáltak itt.
A 2. és 3. doboz nem kapott elhelyezési utasítást. Ezért normál dokumentumfolyamot követnek. Azonban a 1. dobozt relatívan helyezték el. Ezáltal a 2. és 3. doboz teljesen érintetlen marad a 1. doboztól. Ezek a dobozok tehát nem használják a 1. doboz helyét. Az top, bottom, left és right tagok határozzák meg a dobozok elhelyezését. A relatív elhelyezés esetén az eredeti helyzeti a dokumentumfolyamban (flow) található.
• top: 25px – a doboz 25 képponttal lefelé van eltolva. A doboz normál helyzeténél fent 25 pixel kerül beillesztésre.
• right: 25px – a doboz 25 képponttal balra van eltolva. A doboz normál helyzeténél jobbra 25 pixel kerül beillesztésre.
A pixelméretek az eredeti pozícióhoz viszonyítva értelmezendők. Az utasítások határozzák meg, hogy hol kerül beillesztésre az érték, tehát a felső és a jobb oldalon. Ez az aspektus kulcsfontosságú. Az utasítások tehát nem határozzák meg, hogy a dobozt hova kell eltolni.
Az abszolút elhelyezés
Folytatjuk az abszolút elhelyezéssel. Ez az elhelyezési mód teljesen kiveszi az elemet a folyásból. A többi elem az oldalon úgy viselkedik, mintha az elem egyáltalán nem lenne jelen.
Egy példa:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: absolute;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Doboz 1</div>
<div>Doboz 2</div>
<div>Doboz 3</div>
</body>
</html>Itt is három dobozt definiáltak. A 1. doboz abszolút módon van elhelyezve.
A relatív elhelyezéssel ellentétben a 1. doboz számára nincs hely fenntartva. A 2. és 3. doboz felfelé csúsznak.
Az elhelyezési utasítások top, right, bottom vagy left most már nem az elem eredeti pozíciójára vonatkoznak a folyamban. Inkább az utasítások a következő környező elemre vonatkoznak, amely a relative, absolute vagy fixed elhelyezéssel rendelkezik. Ha nincs ilyen környező elem, akkor az elhelyezés az általános dokumentumfa legfelső elemére, azaz az html-re vonatkozik.
Pozícionálás fixed értékkel
Az position: fixed tulajdonsággal rögzíthetjük az elemeket. Itt is egy példa:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p { margin-left: 25%; }
#fixiert {
position: fixed;
top: 20px;
left: 20px;
background-color:#33FFCC;
width: 20%;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="fixiert">Splitter-Effekt Teil 1</div>
<p>Nur für kurze Zeit ist das neueste Tutorial oder Video-Training in der Online-Ansicht oder der Inhalt aus der Download-Kategorie punktefrei. Erfahre hier mehr ...</p>
</body>
</html>A fixált doboz nem görgetni fog, hanem mindig a neki meghatározott pozíción marad.
A fixált dobozok esetében a környező elem mindig a böngészőablak lesz.
Kérjük vegyék figyelembe, hogy a régebbi böngészők esetében komoly problémák adódnak a elemek fixálásával kapcsolatban. Például az IE6 nem azt teszi, amit elvileg kellene. Akik weboldalaikat ezen böngésző számára is optimalizálni akarják/kellene, most két lehetőségük van:
• Lemondani a fixált dobozokról.
• Használni hackeket az IE-hez.
Ha hacket szeretnének használni, javaslom, látogassák meg az alábbi oldalt: http://thestyleworks.de/tut-art/iewinfixed.shtml. Ahol egy kis JavaScript segítségével megmutatják, hogyan lehet megoldani a fixált dobozok megjelenítését ezen böngészőben is.
