Tutorial

Dev Tip - CSS Positioning

By Arnon Puitrakul - 17 ตุลาคม 2015

Dev Tip - CSS Positioning

หายกันไปนานอยู่พอสมควร อันเนื่องมาจากสอบ Midterm เล่นซะแทบตาย ลาก๊อยกันเลยทีเดียว วันนี้เรากลับมาที่เรื่องไอที กันบ้างดีกว่าหลังจากหายเรื่องนี้ไปนาน นั่นคือเรื่องของ CSS Positioning ท้าวความกันก่อน สมัยก่อน (พูดเหมือนนานเลยเนอะ) เวลาเราจะทำหน้าเว็บที่มันเป็น Responsive เราก็จะใช้ Table เข้ามาช่วยจัดหน้าเว็บเรา แต่ปัญหามันเกิดเมื่อ Table มันคือตาราง ไม่ใช่ตัวช่วยจัดหน้า มันไม่ Semantic หรือมันไม่สามารถบอกควาหมายในตัวมันได้อย่างชัดเจน ในปัจจุบัน เราก็เลยใช้ div Tag กัน เพื่อเป็นกล่องเพื่อใส่ Content ของเราลงไป และใช้ CSS ในการจัดตำแหน่ง และ Style ต่าง ๆ แทนที่จะใช้ Table เหมือนแต่ก่อน ทีนี้ในการวางตำแหน่งของ Div Tag ด้วย CSS มันจะแบ่งวิธีการจัดอยู่ 4 วิธีเลยทีเดียว เรามาค่อย ๆ ดูกันทีล่ะแบบล่ะกัน

Static Positioning

แบบแรกเป็นแบบที่ง่ายที่สุดแล้ว เพราะว่าเราไม่จำเป็นต้องไปกำหนดค่าอะไรให้มันเลย มันจะจัดตาม Flow ของหน้าตรง ๆ ไปเลย ไม่ได้มีการ Custom อะไรแต่อย่างไรเลย เช่น

<body>
  <h1>Hello World</h1>
  <p>This is test!</p>
</body>

มันก็จะออกมาเป็น Hello World ตัวใหญ่เป็น Heading และก็ Enter ลงมาเป็น This is test ! ตัวเล็กตามปกติได้เลย ง่ายนิดเดียว

Absolute Positioning

มันก็ตามชื่อเลย เพราะว่า เราสามารถจัดวัตถุได้อย่างอิสระเลย เหมือนกับเราย้าย Object ในโปรแกรมพวก Photoshop เลย โดยเราจะอ้างอิงจาก หน้าเว็บโดยตรงเลย ก่อนอื่น เราจะต้องเพิ่ม Property ตัวนึงก่อน เพื่อเป็นการบอก Browser ว่า เราจะใช้ Absolute Positioning

position : absolute;

อาจจะ งง กันว่า เราจะจัดมันได้อย่างอิสระยังไง มาดูกัน ผมลองเอา Property นี้ใส่เข้าไปใน .box ล่ะกัน

.box
{
  position : absolute;
  top : 5em;
}

ตามโค๊ตนี้ กล่องนี้ก็จะอยู่ในตำแหน่ง 5 em นับจากบนสุดของหน้านั่นเอง โดยไม่สนใจเลยว่า ตรงนั้นมันจะมีอะไรอยู่ ถ้ามีก็ทับมันเลย เอาให้แบน แล้วก็ไปอยู่ข้างหลังเลย... โดยส่วนใหญ่ เราจะใช้ Absolute Positioning ก็ต่อเมื่อ ให้ Object ตัวนั้น ๆ เป็นต้นทาง หรือก็คือเป็นจุดอ้างอิงของ Object อื่น ๆ ในหน้าเรานั่นเอง ถ้ายัง งง ให้ลองไปอ่าน Relative Positioning อันถัดไปได้เลย จะได้เข้าใจมากขึ้น

Relative Positioning

เมื่อ Absolute Positioning บางทีมันก็ทำให้เราจัดหน้าได้ยาก เช่น ถ้าเรามี h1 อยู่ข้างบน แล้วต้องการให้ p มันอยู่ห่างจาก h1 2 em อะไรแบบนี้ ถ้าเป็น Absolute Position เราก็ต้องไปนั่งวัดว่า จะต้อง top ลงมาเท่าไหร่ แต่ปัญหานี้จะหมดไป เมื่อเราไปใช้ Relative Positioning (เขียนเหมือน TV Direct เลยอะ น่ากลัว~~) เพราะว่า Relative Positioning มันจะเทียบจาก Object ข้างๆ มันแทนที่จะวัดจาก ขนาดของหน้าเว็บโดยตรง แต่ก่อนที่เราจะใช้ได้ เราก็ต้องบอก Browser ก่อนว่า เราต้องการให้ Object นี้ใช้ Positioning แบบ Relative โดยการ

position : relative;

เท่านี้ Web Browser ก็รู้แล้วว่า Object ตัวนี้จะใช้ Positioning เป็นแบบ Relative ทีนี้เราลองมาดูตัวอย่างกัน

<body>
  <h1 style = "position: absolute; top:5em;">Hello World</h1>
  <p style = "position: relative; top:5em;">This is test!</p>
</body>

นี่ก็เป็นอีกหนึ่งตัวอย่างของการใช้ Absolute Positioning และ Relative Positioning เข้าด้วยกัน ก่อนอื่น เราสร้าง h1 ก่อนโดยให้มันใช้ Absolute Positioning ก่อนเพื่อกำหนดให้มันอยู่ห่างจากบนสุดของหน้าเว็บเรา 5 em ทีนี้ เราอยากจะให้ p ของเราอยู่ห่างจาก h1 5 em เราก็แค่ใช้ h1 เป็นจุดอ้างอิง และเลือกใช้ Positioning เป็น relative ซะ แล้วก็เซ็ตให้มันห่างลงไป 5 em เท่านี้เราก็จะได้หน้าเว็บที่มี h1 ห่างจากบนสุดของหน้า 5 em และมี p ที่ห่างจาก h1 5 em แล้ว
โดยส่วนตัวผมแนะนำให้ใช้เป็น Relative Positioning ทั้งหมดทั้งในเว็บและการทำ Content หรือ App ต่าง ๆ ได้ยิ่งดี เพราะว่า มันง่ายต่อการทำงาน และการจัดวาง ทำให้ตัดปัญหาเรื่องของ Object กระจายไปมามั่ว ๆ ได้อย่างดีเลยล่ะ เพราะมันจะลอยติดกันตามที่เรากำหนดไว้เลย ในกรณีที่แย่ที่สุด เราก็ไม่จำเป็นต้องมานั่งจัด Object ทุกอย่างใหม่ เพราะว่าเรากำหนด ระยะห่างระหว่าง Object ได้อย่างชัดเจนไปแล้ว คอมมันก็จะมองทั้งหมดเป็นก้อนเดียว และอาจจะอยู่ผิดที่เท่านั้นเอง แต่เพื่อแก้ปัญหานี้ เราอาจจะให้ Object ตัวนึงเป็น Absolute Positioning ไปก็ได้ เหมือนกับเป็นตัวยึด เพื่อแก้ปัญหาดังกล่าว

Fixed Positioning

Fixed Positioning จะคล้าย ๆ กับ Absolute Positioning เลย ในเรื่องของการวางตำแหน่ง โดยมันจะอ้างอิงจากหน้าเว็บโดยตรง แต่สิ่งที่มันต่างกันเลยนั่นก็คือ มันจะสามารถไหลตามที่เรา Scroll หน้าไปได้ ไม่ใช่วางอยู่ที่ตำแหน่งนั่น ๆ นิ่ง ๆ เหมือน Absolute Positioning แต่ก่อนอื่น เราจะต้องบอก Browser ก่อนว่า เราต้องการให้ Object อันนี้ใช้ Positioning แบบ Fixed กันก่อน

position : fixed;

ลองมาดูตัวอย่างกัน ถ้าเราต้องการกล่องที่อยู่มุมด้านขวาสุด

<div style = "position:fixed; right:0; bottom:0">Hello World</div>

ถ้าเราลองเอากล่องนี้ไปวางในหน้าเว็บเรามันก็จะอยู่มุมด้านล่างขวาของเราเสมอเลย ไม่ว่า เราจะเลื่อนมันก็ตาม มันก็จะวิ่งตามเราไป โดยส่วนใหญ่พวกนี้ตัวอย่างง่ายสุดก็น่าจะเป็นทำ Footer ของหน้าเว็บ ที่เราต้องการให้มันอยู่ด้านล่างของหน้าจอเสมอ อะไรพวกนี้ ไม่ก็ปุ่มแชร์ที่บางเว็บให้ลอยอยู่ข้างขวาให้เรากดแชร์ได้ตลอดอะไรแบบนี้

สรุป

สรุปแล้ว การจัดวาง Object ในหน้าเว็บของเราก็จะแบ่งได้เป็น 4 แบบ นั่นก็คือ Static ที่เป็น Default , Absolute ที่จะอ้างอิงจากหน้าเว็บโดยตรง , Relative ที่จะอ้างอิงจาก Object ข้าง ๆ มัน และ Fix ที่จะอ้างอิงจากหน้าเว็บ แต่จะอยู่นิ่ง ๆ ไม่ไปไหน แม้แต่เราจะ Scroll ก็ตาม การจัด Positioning ทั้ง 4 แบบนี้ก็น่าจะทำให้การเขียนเว็บของใครหลาย ๆ คนง่ายขึ้นเยอะมาก สำหรับวันนี้ก็หมดแล้ว เจอกันใหม่โพสต์หน้า สวัสดีครับ

Read Next...

จัดการข้อมูลบน Pandas ยังไงให้เร็ว 1000x ด้วย Vectorisation

จัดการข้อมูลบน Pandas ยังไงให้เร็ว 1000x ด้วย Vectorisation

เวลาเราทำงานกับข้อมูลอย่าง Pandas DataFrame หนึ่งในงานที่เราเขียนลงไปให้มันทำคือ การ Apply Function เข้าไป ถ้าข้อมูลมีขนาดเล็ก มันไม่มีปัญหาเท่าไหร่ แต่ถ้าข้อมูลของเราใหญ่ มันอีกเรื่องเลย ถ้าเราจะเขียนให้เร็วที่สุด เราจะทำได้โดยวิธีใดบ้าง วันนี้เรามาดูกัน...

ปั่นความเร็ว Python Script เกือบ 700 เท่าด้วย JIT บน Numba

ปั่นความเร็ว Python Script เกือบ 700 เท่าด้วย JIT บน Numba

Python เป็นภาษาที่เราใช้งานกันเยอะมาก ๆ เพราะความยืดหยุ่นของมัน แต่ปัญหาของมันก็เกิดจากข้อดีของมันนี่แหละ ทำให้เมื่อเราต้องการ Performance แต่ถ้าเราจะบอกว่า เราสามารถทำได้ดีทั้งคู่เลยละ จะเป็นยังไง เราขอแนะนำ Numba ที่ใช้งาน JIT บอกเลยว่า เร็วขึ้นแบบ 700 เท่าตอนที่ทดลองกันเลย...

Humanise the Number in Python with "Humanize"

Humanise the Number in Python with "Humanize"

หลายวันก่อน เราทำงานแล้วเราต้องการทำงานกับตัวเลขเพื่อให้มันอ่านได้ง่ายขึ้น จะมานั่งเขียนเองก็เสียเวลา เลยไปนั่งหา Library มาใช้ จนไปเจอ Humanize วันนี้เลยจะเอามาเล่าให้อ่านกันว่า มันทำอะไรได้ แล้วมันล่นเวลาการทำงานของเราได้ยังไง...

ทำไม 0.3 + 0.6 ถึงได้ 0.8999999 กับปัญหา Floating Point Approximation

ทำไม 0.3 + 0.6 ถึงได้ 0.8999999 กับปัญหา Floating Point Approximation

การทำงานกับตัวเลขทศนิยมบนคอมพิวเตอร์มันมีความลับซ่อนอยู่ เราอาจจะเคยเจอเคสที่ เอา 0.3 + 0.6 แล้วมันได้ 0.899 ซ้ำไปเรื่อย ๆ ไม่ได้ 0.9 เพราะคอมพิวเตอร์ไม่ได้มองระบบทศนิยมเหมือนกับคนนั่นเอง บางตัวมันไม่สามารถเก็บได้ เลยจำเป็นจะต้องประมาณเอา เราเลยเรียกว่า Floating Point Approximation...