csswg-drafts/css2/images/longdesc/flow-relative-desc.html at f8d339d7c73a76999007c3138f5702de79d32de2 · w3c/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
  <head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

    <title>Long description for relative flow example</title>
  </head>

  <body>
      <h1>Long description for relative flow example</h1>

<P>This diagram illustrates the effects of relative positioning.


<P>A document window is shown, with 8 lines (numbered 1 to 8), each
24px high. The text of the "outer" box (at the end of line 1, halfway
into line 2, and halfway into line 3) is shifted upward 12px. The text
of the "inner" box, thought shifted upward as well, has been
relatively positioned so that it lies in its normal flow position at
the end of line 2.

<P>In the following PRE element, each 24 pixel line is simulated by
two lines, the second beginning with the appropriate number. The
lines, as they appear in the image, contain:</p>

<PRE>
                             Start
1 Beginning of body contents.

2 of outer contents.
                     Inner contents.
3
  End of outer contents.
4                    End of body

5 contents.
</PRE>

<P>The default text color is black.
"Start of outer contents" is red.
"Inner contents" is blue.
"End of outer contents" is red.

<P><a href="../../visuren.html#img-flow-relative">Return to image.</a>

  </body>
</html>