>> English << | česky | PortuguêsZVON > Tutorials > CSS2 tutorial
Intro / Search / ZVON
>> Example 53 << | Prev | Next | Index | Contents

Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings.

XML SourceCSS stylesheetExample link
(1)
     <XXX>
          <AAA>aaa aaa aaa aaa</AAA>
          <BBB>bbb</BBB>
          <CCC>ccc ccc ccc ccc ccc</CCC>
          <DDD>ddd ddd ddd ddd</DDD>
          <EEE>eee eee eee ee eeee eeee</EEE>
     </XXX>
BBB {display:block; position:absolute; left:12ex;
color:red; font-weight:bold}
View output
XML SourceCSS stylesheetExample link
(2)
     <XXX>
          <AAA>aaa aaa aaa aaa</AAA>
          <BBB>bbb</BBB>
          <CCC>ccc ccc ccc ccc ccc</CCC>
          <DDD>ddd ddd ddd ddd</DDD>
          <EEE>eee eee eee ee eeee eeee</EEE>
     </XXX>
AAA {display:block; position:absolute; left:100px;
right:100px;top:10px; color:red; font-weight:bold}
CCC {display:block; position:absolute; left:10px;
right:200px; top:100px; color:purple; font-weight:bold}
DDD {display:block; position:absolute; left:200px;
right:10px; top:3em; color:green; font-weight:bold}
EEE {display:block; position:absolute; left:100px;
right:100px; top:240px; color:navy; font-weight:bold}
View output
XML SourceCSS stylesheetExample link
(3)
     <XXX>
          <AAA>aaa aaa aaa aaa</AAA>
          <BBB>bbb</BBB>
          <CCC>ccc ccc ccc ccc ccc</CCC>
          <DDD>ddd ddd ddd ddd</DDD>
          <EEE>eee eee eee ee eeee eeee</EEE>
     </XXX>
AAA {display:block; position:absolute; left:145px;
right:145px;bottom:10px; color:red; font-weight:bold}
View output