b{}xm{}dels.toxin.hu

A statikus pozicionálási modell beállítása esetén az egyes elemek a normális szövegfolyamban (normal-flow) helyezkednek el, beállítani az position:static CSS tulajdonság megadásával tudjuk, általános minta:

Inline Statikus Elemen

INLINE-SELECTOR { position:static; line-height:±VALUE;
margin-left:±VALUE; margin-right:±VALUE; }

Blokk Statikus Elemen

BLOCK-SELECTOR { position:static; width:+VALUE; height:+VALUE;
margin-left:±VALUE; margin-right:±VALUE;
margin-top:±VALUE; margin-bottom:±VALUE; }

, de mivel az alapértelmezés is ez, erre nagyon nem lesz szükségünk. Tekintsük át mire is képes.

Ebben a pozicionálási módban az azonos szinten lévő blokk elemek egymás alatt fognak elhelyezkedni a szövegfolyamban. A blokkon belül további blokk elemek ill. inline elemek helyezkedhetnek el. A blokk elemek a tartalmazó dobozon belül továbbra is egymás alatt, vertikálisan fognak elhelyezkedni, az inline elemek ezzel ellentétben egymás mellett horizontálisan. Az elemek megjelenítési pozícióját meghatározza az előtte megjelenített statikus elem ill. ennek tulajdonságai : mérete, padding, border, margin beállításai.

Felraktam a szokásos példa fájlt. Különösebb meglepetéssel nem fogunk benne találkozni, láthatjuk viszont a statikus modell legnagyobb előnyét, miszerint képes adaptálódni tetszőleges látótér/viewport mérethez. Megfigyelhetjük rajta a korábbi bejegyzésben leírt megjelenítési szabályokat: a blokk elemek vertikálisan egymás alá kerülnek, a méretezett blokk kivételével mindegyik blokk elem szélessége automatikusan kerül beállításra, az elemek pozícióját befolyásolják az előtte megjelenített statikus elem ill. ennek tulajdonságai : mérete, padding, border, margin beállításai. Illetve a vertikális margók átlapolódak, inline elemen csak a horizontális margó beállítások érvényesülnek – vertikálisan a line-height használható -, azok viszont nem lapolódnak át stb. volt már róluk szó
következik a jóval érdekesebb, abszolút pozicionálási modell

Hajrá CSS