โครงสร้าง
#div-before
#div-1
     #div-1a
     #div-1b
     #div-1c
#div-after

2 column absolute: กรณีที่ 1 ไม่ได้กำหนดความสูงให้ relative

ทำให้ตัว absolute บัง relative รวมทั้ง element อื่นๆทั้งหมด ทำให้ดูเหมือนว่า absolute ลอยออกมานอก relative

id = div-before

id = div-1 ( ให้มี position= rellative )

id = div-1a
( ให้มี position=absolute ,top+right)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b
( ให้มี position=absolute ,top+left)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.

id = div-1c

id = div-after

2 column absolute: กรณีที่ 2 กำหนดความสูงให้ relative

คราวนี้ดูเหมือนว่า absolute อยู่ภายใน relative จริงๆ แต่ว่าถ้า absolute มีความสูงเกินกว่าตัว relative ล่ะ ??? และที่สำคัญ absolute ก็ยังบังข้อความของ relative รวมทั้ง element อื่นๆที่อยู่ภายใน relative ด้วย

id = div-before

id = div-1 ( ให้มี position= rellative )

id = div-1a
( ให้มี position=absolute ,top+right)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b
( ให้มี position=absolute ,top+left)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.

id = div-1c

id = div-after