>> English << | česky | Português | ZVON > 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 Source | CSS stylesheet | Example 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 Source | CSS stylesheet | Example 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 Source | CSS stylesheet | Example 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 |