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.

AppG
X

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.