Red and orange areas together represent the "X" glyph of the red overlapped span#span1
Big black area and lime stripe together represent the "X" glyph of the span#span2
Small black square is the "X" glyph of the div#div3 which is supposed to overlap the "X" glyph of the red overlapped span#span1
Orange stripe is the descent area of span#span1; the top edge of the orange stripe is flush with the parent's baseline.
Lime stripe is the descent area of span#span2; the top edge of the lime stripe is flush with the parent's baseline.
Red and orange areas together represent the "X" glyph of the red overlapped span#span1
Big black area and lime stripe together represent the black "X" glyph of the span#span2
Small black square is the "X" glyph of the div#div3 which is supposed to overlap the "X" glyph of the red overlapped span#span1
Orange stripe is the descent area of span#span1; the top edge of the orange stripe is flush with the parent's baseline.
Lime stripe is the descent area of span#span2; the top edge of the lime stripe is flush with the parent's baseline.