รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

CSS Position แต่ละแบบนั้นทำงานกันอย่างไร

    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 แทน หรือ มอง <html> เป็น container ของมันแทนไปเลยก็ได้ (ใน browser เก่า ๆ มันจะมอง <body> เป็น container แทน) อันนี้ คือ ในกรณีถ้าเงื่อนไขข้างต้นที่ผมกล่าวมานั้นไม่มีการกำหนด position ไว้เลย
     
    และหาก element ที่เขียนครอบมันอยู่นั้นถูกกำหนด position: static; ก็จะไม่เป็นผลเช่นกันมันจะมองตัวอื่น ๆ เป็น container ของมันแทนต่อไป (เหมือนกาฝาก)
     
    ทีนี้เมื่อมีการเรียกใช้ position: absolute; เข้ามา flow ของทั้งหน้านั้นจะไปสิ้นสุดอยู่ที่ element ที่เรียกใช้ position: absolute; นั้น
     

    Fixed:

     
    element ใดที่ถูกสั่งการแสดงผลด้วย position: fixed; จะถูกแสดงผลออกมาแบบอิสระเช่นเดียวกับ absolute แต่ว่า container ของมันคือ browser windows ครับ
     

     

บทความที่น่าสนใจ

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com