การใช้ 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

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

  1. dogdoy

    อู้ววว ขอบคุณครับ เพิ่งจะรู้จักเจ้า position: fixed นี่แหละครับ

    Reply

  2. happiness

    เคยใช้ position: fixed ใน ie6 แล้วมีปัญหามากๆ ลองหาวิธีแก้ปัญหาจาก google แต่ก็ยังแสดงผลไม่เหมือนบราวเซอร์ตัวอื่นๆ ซักที (T_T)

    ไม่ทราบว่าพอจะมีแนวทางแก้ไหมครับ ???

    Reply

  3. Todz

    ขอบคุณสำหรับบทข้อความดีๆๆ

    Reply

  4. iporsut

    แล้ว position ของตัว container มีผลอะไรต่อ child element ไหมครับ

    Reply

  5. sunshy

    ดูเหมือนตัวอย่างไม่ใช่นะครับ ไม่เห็นเหมือนที่อธิบายเลย ไม่เห็นกล่องฟ้ากล่องเขียวเลยครับ

    Reply

  6. aon

    ตัวอย่างหายไปแล้วหรอครับ หาไม่เจอ คิดว่าถ้าได้ตัวอย่างประกอบน่าจะเข้าใจกว่านี้อ่ะครับ

    Reply

    • Radiz Sutthisoontorn
      Radiz Sutthisoontorn

      ทำการ update link ตัวอย่างกลับมาให้แล้วนะครับขอบคุณมากครับที่ช่วยแจ้งครับคุณ aon

      Reply

  7. tee

    อ่านแล้ว ยังไม่เข้าใจ ครับ . .

    ไม่เห็น กล่องสีเขียว สีฟ้าที่อ้างถึงเช่นกันครับ

    Reply

    • Radiz Sutthisoontorn
      Radiz Sutthisoontorn

      ต้องขออภัยคุณ Tee ครับเนื่องจากบทความเก่า link ตัวอย่างเลยหายไปผมได้ทำการเชื่อมกลับมาไว้ให้แล้วนะครับ ต้องขอขอบคุณด้วยครับที่เข้ามาช่วยแจ้งให้ทราบครับ

      Reply

  8. copperist

    โทษทีครับ Tee นายใช่คนที่เป็นนักเพาะกาย ที่ มธบ. ที่เรียนคณะไอทีด้วยป่าวครับ คุ้นๆ

    Reply

  9. คนโง่

    อ่านแล้ว ไม่เข้าใจ เก่งแต่ยังเขียนแล้วเข้าใจยาก

    Reply

  10. bom

    position: absolute;
    left: 522px;
    top: 1348px;
    ทำไมข้อความใน div ไม่ขึ้นครับ
    //ผม select มาหน้า 2 ข้อความไม่ขึ้นครับ
    ขอบคุณครับ

    Reply

Leave a Reply

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

Connect with Facebook

Back to Top