| 1234567891011121314151617181920212223242526272829303132333435363738 |
- <rml>
- <head>
- <title>CSS Position: Absolute positioning - Relative</title>
- <link type="text/rcss" href="../style.rcss"/>
- <link rel="source" href="https://drafts.csswg.org/css-position-3/#comparison" />
- <link rel="help" href="https://drafts.csswg.org/css-position-3/#comparison" />
- <meta name="description" content='The "inner" text is positioned in an independent box, relative to the top-left corner of the start of the "outer" text.' />
- <style>
- body {
- font-size: 20dp;
- display: block;
- background: #ddd;
- color: #444;
- line-height: 200%;
- }
- #outer {
- position: relative;
- color: red
- }
- #inner {
- position: absolute;
- top: 200dp; left: -100dp;
- height: 130dp; width: 130dp;
- color: blue;
- }
- </style>
- </head>
- <body>
- <p>
- Beginning of p contents.
- <span id="outer"> Start of outer contents.
- <span id="inner"> Inner contents.</span>
- End of outer contents.</span>
- End of p contents.
- </p>
- <handle size_target="#document"/>
- </body>
- </rml>
|
