สวัสดีครับ หายไปนาน ต้องขอโทษเพื่อน ๆ พี่ ๆ น้อง ๆ ที่แวะเวียนเข้ามาด้วยนะครับ เข้าเรื่องกันเลยดีกว่า มีน้อง ๆ เพื่อน ๆ ใกล้ ๆ ตัวถามผมกันบ่อย ๆ ว่า property “position” กับ value ของมันแต่ละแบบนั้นทำงานกันอย่างไร เลยคิดว่าเอามาเขียนแนะนำไว้ที่นี่ด้วยเลยดีกว่า
ทีนี้เรามาทำความรู้จักกันก่อนว่าเจ้า property position
เนี่ย มันมี value เป็นอะไรได้บ้าง
- static
- relative
- absolute
- fixed
ซึ่งแต่ละค่า value นั้น ก็จะให้ผลลัพธ์แตกต่างกันไป และ บาง value จะสามารถใช้ร่วมกับคำสั่ง top, bottom, left และ right ได้ เพื่อกำหนดจุดพิกัดในการแสดงผล ทีนี้ผมจะอธิบายคุณสมบัติของ value แต่ละตัวตามลำดับ ดังนี้ครับ
Static
element ใดที่ถูกสั่งการแสดงผลด้วย position: static; นั้นจะแสดงผลออกมา ณ จุด ๆ นั้นที่ element อยู่ (normal flow) และ ไม่สามารถกำหนดพิกัดใดใดให้ได้ จากตัวอย่าง คุณจะเห็นกล่องสีส้ม ซึ่งเป็น block element (div) ที่เรียกใช้ class ที่มีคำสั่ง position: static; (เปิด code ดูด้วยนะครับ) จะเห็นว่าผมสั่ง top และ left อย่างละ 4em ซึ่งคำสั่งบอกพิกัดนั้นไม่มีผลใดใดกับมันทั้งสิ้น มันจะแสดงผลต่อจาก <p>CSS version ที่ผมใช้เขียนในตัวอย่างนี้ คือ 2</p> ที่ผมเขียน code ต่อกันตรงนั้นไม่ไปไหน
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 แทน หรือ มอง <html> เป็น container ของมันแทนไปเลยก็ได้ (ใน browser เก่า ๆ มันจะมอง <body> เป็น container แทน) อันนี้ คือ ในกรณีถ้าเงื่อนไขข้างต้นที่ผมกล่าวมานั้นไม่มีการกำหนด position ไว้เลย
และหาก element ที่เขียนครอบมันอยู่นั้นถูกกำหนด position: static; ก็จะไม่เป็นผลเช่นกันมันจะมองตัวอื่น ๆ เป็น container ของมันแทนต่อไป (เหมือนกาฝาก)
ทีนี้เมื่อมีการเรียกใช้ position: absolute; เข้ามา flow ของทั้งหน้านั้นจะไปสิ้นสุดอยู่ที่ element ที่เรียกใช้ position: absolute; นั้น
จากตัวอย่าง block element ที่เรียก position: absolute; คือ กล่องสีเขียวอ่อน ทีนี้ให้คุณลองลบ คำสั่งที่กำหนดความสูงของ #container ออกดู เฉพาะบรรทัดนั้น บรรทัดเดียวนะครับ คุณจะเห็น flow ของหน้า page จริง ๆ หลังจากที่มี element หนึ่งเรียกใช้คำสั่ง position: absolute;
Fixed:
element ใดที่ถูกสั่งการแสดงผลด้วย position: fixed; จะถูกแสดงผลออกมาแบบอิสระเช่นเดียวกับ absolute แต่ว่า container ของมันคือ browser windows ครับ ทีนี้ใส่ค่าความสูงคืนให้กับ #container ครับ แล้วลอง scroll ขึ้นลงดูนะครับ แล้วดูว่า เจ้ากล่องพื้นใสขอบชมพูมันแสดงผลอย่างไร
หวังว่าการพบกันครั้งนี้ คงทำให้เพื่อน ๆ พี่ ๆ น้อง ๆ ได้ประโยชน์ ได้ tips เล็ก ๆ น้อย ๆ ไปประยุคใช้กันเพิ่มนะครับ พบกันอีกครั้งคราวหน้าครับผม
13 Responses to การใช้ position ใน CSS