csswg-drafts/css2/images/longdesc/flow-abs-rel-desc.html at c30ee4832e8b782553ffcaf8bdd88470f4e41571 · 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
48
49
50
51
52
53
54
55
56
57
58
59
60
<!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 example illustrating positioning
with respect to a positioned ancestor</title>
  </head>

  <body>
      <h1>Long description for example illustrating positioning
with respect to a positioned ancestor</H1>

<P>This diagram illustrates the effects of absolutely positioning a
box ("inner") with respect to a containing block established by a
relatively positioned ancestor ("outer").

<P>A document window is shown, with 8 lines (numbered 1 to 8), each
24px high. All body and "outer" text has been flowed into lines into
lines 1, 2, and 3. The "inner" box has been positioned relative to the
top and left edges of the "outer" element's first inline box.

<P>In the following PRE element, each 24 pixel line is simulated by
two lines, the second beginning with the appropriate number.  The
reference edges for positioning the "inner" box are indicated in the
diagram by thick dashed lines. The upper left coordinates of the
"inner" box are labeled by (+200, -100). In the PRE element below,
the reference edges for "inner" are indicated by vertical bars and
equal signs. The offset of the "inner" box is given in square brackets.
The lines of text, as they appear in the
image, contain approximately:</p>


<PRE>                        ====
                             |
1 Beginning of body contents.|Start

2 of outer contents. End of outer

3 contents. End of body contents.

4          [(+200, -100)]

5                Inner

6                contents.

7

8
</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-abs-rel">Return to image.</a>
  </body>
</html>