div.exampleDiv1
div.exampleDiv1{
}
div.exampleDiv2
Span
div.exampleDiv1{
}
Div1 Left: Top:Right: Bottom:
Div2 Left: Top:Right: Bottom:
Div3
Div2 Left: Top:Right: Bottom:
Div3
-
position:static; เป็นค่าเริ่มต้น จะกำหนดหรือไม่กำหนดก็ได้ ปกติถ้ากำหนดจะใช้เมื่อทำการ override หรือกรณีต้องการล้างค่าที่กำหนดก่อนหน้า จากค่าอื่นเช่น fixed , absolute หรือ relative
position:static; จะไม่รองรับการกำหนดค่า left , top, right และ bottom -
position:relative;เป็นการกำหนดตำแหน่งที่อิงความสัมพันธ์กับตำแหน่งเดิม เช่น div1 กำหนด position เป็น relative และกำหนด left:20px; ผลลัพธ์คือ div1 จากเลื่อนออกจากตำแหน่งเดิมทางซ้าย 20 pixels
ข้อมูลหรือเนื้อหาที่อยู่ใน element ที่กำหนด position เป็น relative สามารถที่จะเลื่อนและอยู่วางซ้อนเหนือ elements ตัวอื่นได้ แต่จะเกิดพื้นที่ว่างจากเนื้อหาหรือข้อมูลขึ้นในตำแหน่งเดิม
position:relative;จะใช้บ่อยสำหรับบรรจุบล็อกของ elements ที่กำหนด position เป็น absolute
-
position:absolute; จะกำหนดตำแหน่งโดยอิงกับตำแหน่ง parent ตัวแรก ที่กำหนด position เป็นค่าอื่นที่ไม่ใช่ static
ตัวอย่าง ถ้า div1 อยู่ใน div2 หมายถึง div2 เป็น parent ของ div1<div id="div2"> <div id="div1"> </div> </div>ถ้า div1 อยู่ใน div2 และ div2 อยู่ใน div3 หมายถึง div2 และ div3 เป็น parent ของ div1<div id="div3"> <div id="div2"> <div id="div1"> </div> </div> </div>หาก div3 มีการกำหนด position เป็น relative,absolute หรือ fiexd (ยกเว้น static)
และเมื่อกำหนด div1 position เป็น absolute ดังนั้นตำแหน่างของ div1 จะอิงความสัมพันธ์
กับตำแหน่งของ div3 ซึ่งเป็น parent ตัวแรกที่เข้าเงื่อนไขกรณีไม่มี parent ใดๆ ที่เข้าเงื่อนไข ตำแหน่งของ div1 ที่กำหนด position เป็น absolute จะอิงกับ <html> หรือ ขอบด้านในของบราวเซอร์
position:absolute; สามารถที่จะซ้อนทับกันได้ โดยใช้ร่วมกับ z-index เพื่อกำหนดตำแหน่งบน ล่าง
-
position:fixed; .ใช้กำหนดตำแหน่งของ element โดยอิงความสัมพันธ์กับตำแหน่งขอบด้านในของบราวเซอร์ และจะไม่เคลื่อนเมื่อมีการเลื่อน scrollbar
ถ้ากำหนด position ของ div1 เป็น fixed และกำหนด left:45px;top;100px; ตำแหน่งของ div1 จะขยับออกจากด้านซ้ายของขอบด้านในของเบราวเซอร์ 45 pixels และขยับออกจากด้านบนของขอบด้านในของบราวเซอร์เท่ากับ 100 pixels
