English | česky | >> Português <<ZVON > Tutorials > CSS2 tutorial
Introdução / Procura / ZVON
>> Exemplo 51 << | Anterior | Próximo | Index | Conteúdos

A [osição relativa de uma caixa significa que esta está deslocada relativamente à sua posição normal. Quanto uma caixa é posicionada relativamente, a posição da caixa seguinte é calculada como se a anterior não tivesse sido deslocada. Este deslocamento é dado pelas propriedades "top" (deslocamento relativamente à margem superior), "right" (relativamente à margem direita), "left" (relativamente à margem esquerda) e "bottom" (relativamente à margem inferior).

Documento XMLfolha de estilos CSSExemplo de ligação
(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}
Ver resultado
Documento XMLfolha de estilos CSSExemplo de ligação
(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}
Ver resultado
Documento XMLfolha de estilos CSSExemplo de ligação
(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}
Ver resultado
Documento XMLfolha de estilos CSSExemplo de ligação
(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}
Ver resultado