position แต่ละค่า value นั้น ก็จะให้ผลลัพธ์แตกต่างกันไป และ บาง value จะสามารถใช้ร่วมกับคำสั่ง top, bottom, left และ right ได้ เพื่อกำหนดจุดพิกัดในการแสดงผล ทีนี้ผมจะอธิบายคุณสมบัติของ value แต่ละตัวตามลำดับ ดังนี้ครับ
Static
element ใดที่ถูกสั่งการแสดงผลด้วย position: static; นั้นจะแสดงผลออกมา ณ จุด ๆ นั้นที่ element อยู่ (normal flow) และ ไม่สามารถกำหนดพิกัดใดใดให้ได้
Relative
element ใดที่ถูกสั่งการแสดงผลด้วย position: relative; นั้นจะแสดงผลออกมา ณ จุด ๆ นั้นที่ element อยู่ (normal flow) แต่สามารถระบุพิกัดให้กับตัวมันได้ บางครั้ง element ที่ถูกสั่งการด้วย position: relative; นั้นจะไปแทนที่ช่องว่างที่เกิดขี้นจาก element ก่อนหน้า อาทิ ช่องว่างที่เกิดจาก float model
โดยปกติแล้ว position: relative; จะไม่แสดงผลอะไรให้เห็น (จะเหมือนการเขียน code ธรรมดา โดยไม่ได้สั่ง position แต่อย่างใด) แต่เมื่อเราต้องการให้เกิดการเข้าแทนที่ต่าง ๆ ใน block element เราก็สามารถใช้ position: relative ให้เข้าไปควบคุมการแสดงผลของ block element นั้น ๆ ที่เราต้องการได้
Absolute
element ใดที่ถูกสั่งการแสดงผลด้วย position: absolute; นั้น จะถูกแสดงผลออกมาแบบอิสระไม่ยึดติดกับ normal flow ผู้เขียน code สามารถกำหนดที่อยู่ของมันได้อย่างอิสระบน webpage นั้น ๆ โดย element ที่เรียกใช้ position: absolute; จะมีพื้นที่อ้างอิงอยู่ใน element ที่เป็น container ของมันเท่านั้น ในที่นี้ คือ div#container
กรณี ที่ไม่มีการกำหนด position ให้ element ที่ครอบมันอยู่ มันจะไม่มอง element นั้นเป็น container นะครับ มันจะมองตัวอื่นที่กำหนด position แล้วอาจจะครอบตัวที่ครอบมันอยู่อีกทีเป็น container แทน หรือ มองเป็น container ของมันแทนไปเลยก็ได้ (ใน browser เก่า ๆ มันจะมองเป็น container แทน) อันนี้ คือ ในกรณีถ้าเงื่อนไขข้างต้นที่ผมกล่าวมานั้นไม่มีการกำหนด position ไว้เลย
และหาก element ที่เขียนครอบมันอยู่นั้นถูกกำหนด position: static; ก็จะไม่เป็นผลเช่นกันมันจะมองตัวอื่น ๆ เป็น container ของมันแทนต่อไป (เหมือนกาฝาก)
ทีนี้เมื่อมีการเรียกใช้ position: absolute; เข้ามา flow ของทั้งหน้านั้นจะไปสิ้นสุดอยู่ที่ element ที่เรียกใช้ position: absolute; นั้น
Fixed:
element ใดที่ถูกสั่งการแสดงผลด้วย position: fixed; จะถูกแสดงผลออกมาแบบอิสระเช่นเดียวกับ absolute แต่ว่า container ของมันคือ browser windows ครับ
