English | >> česky << | PortuguêsZVON > Tutorials > CSS2 tutorial
>> Příklad 51 << | Předešlý | Následující | Index | Obsah

Relativní pozice "relative position" znamená, že vykreslený obdélník (box) je umístěn relativně vůči jeho normální pozici. Když je pozice relativní, tak pozice následujícího obdélníku je vypočítána, jako by předešlý nebyl posunut. Posunutí je dáno vlastnostmi "top" (posunutí od horního okraj), "right" (posunutí od pravého okraje doleva), "bottom" (posunutí od spodního okraje nahoru), a "left" (posunutí od levého okraje do prava).

XML dokumentCSS stylOdkaz na příklad
(1)
     <XXX>
          <AAA>aaa</AAA>
          <BBB>bbb</BBB>
          <CCC>ccc</CCC>
          <DDD>ddd</DDD>
          <EEE>eee</EEE>
     </XXX>

AAA {display:block;}
BBB {display:block; position:relative; left:50px}
CCC {display:block; position:relative; left:100px}
DDD {display:block; position:relative; left:150px}
EEE {display:block; position:relative; left:200px}
Zobraz výstupy
XML dokumentCSS stylOdkaz na příklad
(2)
     <XXX>
          <AAA>aaa</AAA>
          <BBB>bbb</BBB>
          <CCC>ccc</CCC>
          <DDD>ddd</DDD>
          <EEE>eee</EEE>
     </XXX>

AAA {display:block;}
BBB {display:block; position:relative; top:1em}
CCC {display:block; position:relative; top:3em}
DDD {display:block; position:relative; top:6em}
EEE {display:block; position:relative; top:12em}
Zobraz výstupy
XML dokumentCSS stylOdkaz na příklad
(3)
     <XXX>
          <AAA>aaa</AAA>
          <BBB>bbb</BBB>
          <CCC>ccc</CCC>
          <DDD>ddd</DDD>
          <EEE>eee</EEE>
     </XXX>

AAA {display:block;}
BBB {display:block; position:relative; right:0.5ex}
CCC {display:block; position:relative; right:1ex}
DDD {display:block; position:relative; right:1.5ex}
EEE {display:block; position:relative; right:2ex}
Zobraz výstupy
XML dokumentCSS stylOdkaz na příklad
(4)
     <XXX>
          <AAA>aaa</AAA>
          <BBB>bbb</BBB>
          <CCC>ccc</CCC>
          <DDD>ddd</DDD>
          <EEE>eee</EEE>
     </XXX>

AAA {display:block;}
BBB {display:block; position:relative; bottom:1ex}
CCC {display:block; position:relative; bottom:3ex}
DDD {display:block; position:relative; bottom:6ex}
EEE {display:block; position:relative; bottom:11ex}
Zobraz výstupy