English | >> česky << | Português | ZVON > Tutorials > CSS2 tutorial |
Úvod / Hledej / ZVON |
>> 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 dokument | CSS styl | Odkaz 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 dokument | CSS styl | Odkaz 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 dokument | CSS styl | Odkaz 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 dokument | CSS styl | Odkaz 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 |