>> English << | česky | PortuguêsZVON > Tutorials > CSS2 tutorial
>> 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 SourceCSS stylesheetExample 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 SourceCSS stylesheetExample 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 SourceCSS stylesheetExample 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 SourceCSS stylesheetExample 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