position_06_absolute_positioning.rml 974 B

1234567891011121314151617181920212223242526272829303132333435
  1. <rml>
  2. <head>
  3. <title>CSS Position: Absolute positioning</title>
  4. <link type="text/rcss" href="../style.rcss"/>
  5. <link rel="source" href="https://drafts.csswg.org/css-position-3/#comparison" />
  6. <link rel="help" href="https://drafts.csswg.org/css-position-3/#comparison" />
  7. <meta name="description" content='All of the text within #outer (the "outer" and "inner" text) moves down to an independent box in the lower right corner. The two halves of "body" text flow together.' />
  8. <style>
  9. body {
  10. font-size: 20dp;
  11. display: block;
  12. background: #ddd;
  13. color: #444;
  14. line-height: 200%;
  15. }
  16. #outer {
  17. position: absolute;
  18. top: 200dp; left: 200dp;
  19. width: 200dp;
  20. color: red;
  21. }
  22. #inner { color: blue }
  23. </style>
  24. </head>
  25. <body>
  26. <p>
  27. Beginning of p contents.
  28. <span id="outer"> Start of outer contents.
  29. <span id="inner"> Inner contents.</span>
  30. End of outer contents.</span>
  31. End of p contents.
  32. </p>
  33. <handle size_target="#document"/>
  34. </body>
  35. </rml>