การใช้ position ใน CSS

สวัสดีครับ หายไปนาน ต้องขอโทษเพื่อน ๆ พี่ ๆ น้อง ๆ ที่แวะเวียนเข้ามาด้วยนะครับ เข้าเรื่องกันเลยดีกว่า มีน้อง ๆ เพื่อน ๆ ใกล้ ๆ ตัวถามผมกันบ่อย ๆ ว่า property “position” กับ value ของมันแต่ละแบบนั้นทำงานกันอย่างไร เลยคิดว่าเอามาเขียนแนะนำไว้ที่นี่ด้วยเลยดีกว่า

กรุณาดูตัวอย่างประกอบครับ

ทีนี้เรามาทำความรู้จักกันก่อนว่าเจ้า property position เนี่ย มันมี value เป็นอะไรได้บ้าง

  1. static
  2. relative
  3. absolute
  4. 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 เล็ก ๆ น้อย ๆ ไปประยุคใช้กันเพิ่มนะครับ พบกันอีกครั้งคราวหน้าครับผม

Back to Top

13 Responses to การใช้ position ใน CSS

Leave a Reply to คนโง่ Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top