>> English << | česky | Português | ZVON > Tutorials > CSS2 tutorial |
Intro / Search / ZVON |
>> Example 51 << | Prev | Next | Index | Contents |
Relative position means that the box is offset relative to its normal position. When a box is relatively positioned, the position of the following box is calculated as though the previous one were not offset. This offset is given by properties top (offset below the top edge), right (offset to the left of the right edge), bottom (offset above the bottom edge), and left (offset to the right of the left edge).
XML Source | CSS stylesheet | Example link |
---|---|---|
(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} | View output |
XML Source | CSS stylesheet | Example link |
(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} | View output |
XML Source | CSS stylesheet | Example link |
(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} | View output |
XML Source | CSS stylesheet | Example link |
(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} | View output |