이 도표는, 상대적으로 위치된 선조(ancestor: "outer")에 의하여 생성된 용기블럭(containing block)에 대해, 절대(absolute)적으로 박스("inner") 위치시킴 효과 를 설명한다.

문서 창에 각각 24px 높이의 1 - 8 수치가 붙은 줄들이 보인다.
모든 본체(body)와 "outer" 텍스트는 줄들 1, 2,와 3 안에서 줄들로 흐른다.
"inner" 박스는 그 "outer" 엘레멘트의 첫번째 인라인(inline) 박스의 맨위(top)와 왼쪽 모서리(edge)들에 상대적으로 위치되었다.

다음 PRE 엘레멘트(element)에, 각 24 pixel 줄은 두 줄씩 띄워 묘사하였고, 그 두번째에 시작에 해당 수치를 표시하였다. "inner" 박스 위치시킴(positioning)을 위한 참조 모서리(edge)들은 도표에서 굵은 대쉬(-)점선(dashed) 줄들로 표시되었다.
그 "inner" 박스의 위쪽 왼쪽 좌표(coordinate)들(+200, -100)이 라벨(label)되었다. 아래 PRE 엘레멘트에서 "inner"를 위한 참조 모서리들은 수직 바(bar)들과 같음표시(=)들로 표시되었다.
그 "inner" 박스의 오프세트(offset)는 사각형(square)으로 표시하였다.
이미지에서 텍스트의 줄들은 대략적으로 아래와 같다:

                        ====
                          |
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

그 디폴트(default) 텍스트(text) 색상(color)은 검정이다.
"Start of outer contents"은 적색.
"Inner contents"은 청색.
"End of outer contents"은 적색이다.