CSS Position tulajdonság
A Position tulajdonság leírása, használata
- Főoldal
/
- Kurzusok
/
- Webfejlesztés
/
- CSS
/
- CSS kezdőknek
CSS Position tulajdonság
A position tulajdonság segítségével változtathatjuk meg az elemek elhelyezkedési módját és elhelyezkedését. Ha egy elemet szeretnénk az oldalon bármerre mozgatni vagy akár a többi fölött megjeleníteni, akkor az "absolute" értéket kell beállítani.
Az elem mozgatásához a top, left, right, bottom tulajdonságok értékeit kell megváltoztatnunk. Pl.
p
{
position: absolute;
top: 10px;
}
Ahogy az alábbi képen is látszi, a szöveg rámászott a képre (a kép fölé került), és fentről számítva 10 pixelnyit le van taszítva.
Fontos: Az absolute értékkel rendelkező elemek pozíciója, a szülök között található első elemhez viszonyitva történik, mely rendelkezik a position: relative értékkel.
Amennyiben nem találunk ilyen elemet, így a body elemhez viszonitva fognak elhelyzkedni az absolute értékkel rendelkező elemek. A fenti példában a "p" elemeket a többi elem fölé emelve fentről 10px távolságot taszítva lefele fog elhelyezkedni.
Ha szeretnénk egy másik elemhez viszonyitani, akkor az adott elemre beállíthatjuk a "position: relative;" értéket.
div
{
position: relative;
}
div p
{
position: absolute;
top: 10px;
}
A fenti példában a "p" elemek a többi elem fölé kerülnek, a szülök között (melyek div elemek) található első elemhez viszonyitva 10 pixelt eltolva fentről lefele.
A position értéke még lehet "fixed" is, ebben az esetben az adott elem mindig a beállított pozícióban marad, az oldal görgetése során sem mozdul el. Ebben az esetben is érvényes az, hogy lehet bármelyik szülő elemhez viszonyítani, egyébként az oldal körvonalaihoz történik a viszonyítás (felső, alsó, bal, jobb).
- Előző lecke: CSS Float tulajdonság
- Következő lecke: Speciális elemek megváltoztatása
Részletek
- Megtekintve: 752
- Haszontalannak jelölve: 0
- Hasznosnak jelölve: 1
- Értékelés: