position_08_absolute_positioning_no_relative.rml 948 B

1234567891011121314151617181920212223242526272829303132333435
  1. <rml>
  2. <head>
  3. <title>CSS Position: Absolute positioning - No relative</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='Same as before, except now the "inner text" is positioned relative to the top-left corner of the page itself.' />
  8. <style>
  9. body {
  10. font-size: 20dp;
  11. display: block;
  12. background: #ddd;
  13. color: #444;
  14. line-height: 200%;
  15. }
  16. #outer { color: red }
  17. #inner {
  18. position: absolute;
  19. top: 200dp; left: -100dp;
  20. height: 130dp; width: 130dp;
  21. color: blue;
  22. }
  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>