>> English << | česky | PortuguêsZVON > Tutorials > CSS2 tutorial
>> Example 54 << | Prev | Next | Index | Contents

The position of fixed boxes is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. In the case of continuous media, the box is fixed with respect to the viewport (and doesn't move when scrolled).

XML SourceCSS stylesheetExample link
(1)
     <XXX>
          <AAA>AAAAA AAAAA</AAA>
          <BBB>bbb bbbb bbbb bbbb bbbbb</BBB>
          <BBB>aaa aaa aaa</BBB>
          <BBB>bbb bbbb bbbb bbbb bbbbb</BBB>
          <BBB>aaa aaa aaa</BBB>
          <BBB>bbb bbbb bbbb bbbb bbbbb</BBB>
          <BBB>aaa aaa aaa</BBB>
          <BBB>bbb bbbb bbbb bbbb bbbbb</BBB>
          <BBB>aaa aaa aaa</BBB>
          <BBB>bbb bbbb bbbb bbbb bbbbb</BBB>
          <BBB>aaa aaa aaa</BBB>
          <BBB>bbb bbbb bbbb bbbb bbbbb</BBB>
          <BBB>aaa aaa aaa</BBB>
          <BBB>bbb bbbb bbbb bbbb bbbbb</BBB>
          <BBB>aaa aaa aaa</BBB>
          <BBB>bbb bbbb bbbb bbbb bbbbb</BBB>
          <BBB>aaa aaa aaa</BBB>
          <BBB>bbb bbbb bbbb bbbb bbbbb</BBB>
          <BBB>aaa aaa aaa</BBB>
          <BBB>bbb bbbb bbbb bbbb bbbbb</BBB>
          <BBB>aaa aaa aaa</BBB>
          <BBB>bbb bbbb bbbb bbbb bbbbb</BBB>
          <BBB>aaa aaa aaa</BBB>
          <BBB>bbb bbbb bbbb bbbb bbbbb</BBB>
          <BBB>aaa aaa aaa</BBB>
     </XXX>

AAA {position:fixed; top:10px;
color:red; font-weight:bold}
BBB {display:block; color:navy}
View output