이 도표는 상대적으로 위치시킴(positioning)의 효과를 설명한다.

각 24px 높이의 8 줄들(번호 1에서 8)의 문서 창이 보인다.
"outer" 박스 텍스트(줄 1 끝에서, 줄 2의 중간과 줄 3의 중간까지)는 12px 위로 이동된다.
"inner" 박스 텍스트도 위로 이동하지만, 그 정상흐름(normal flow)에서 줄 2의 끝에 위치하도록 상대적으로 위치된다.

다음 PRE 엘레멘트(element)에, 각 24 pixel 줄은 두 줄씩 띄워 묘사하였고,
그 두번째 시작에 해당 수치를 표시하였다.
그 줄들은 이미지에서 나타나는 것과 같이:

                             Start
1 Beginning of body contents.

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

5 contents.

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