ทำไมเรื่อง Position ถึงทำให้มือใหม่ปวดหัว
เวลาที่เราเริ่มหัดเขียนเว็บ การจัดวางองค์ประกอบต่างๆ บนหน้าจอเป็นเรื่องที่ท้าทายที่สุดอย่างหนึ่ง โดยเฉพาะเมื่อเราต้องการวางปุ่มหรือรูปภาพให้อยู่ในตำแหน่งที่เจาะจง หลายคนมักจะงงว่าทำไมโค้ดที่เขียนไปถึงไม่ยอมขยับตามใจนึก นั่นเป็นเพราะเรายังไม่เข้าใจเรื่อง CSS Position (คุณสมบัติการกำหนดตำแหน่งของอิลิเมนต์บนหน้าเว็บ) อย่างถ่องแท้นั่นเอง
ลองจินตนาการว่าหน้าเว็บคือกระดาษแผ่นหนึ่ง ปกติแล้วเวลาเราวางข้อความหรือรูปภาพ มันจะเรียงต่อกันลงมาเหมือนกับการเขียนหนังสือ ซึ่งเป็นค่าเริ่มต้นที่เรียกว่า Normal Flow (การจัดวางตามลำดับปกติของเบราว์เซอร์) แต่ถ้าวันหนึ่งเราอยากให้ปุ่มลอยอยู่มุมขวาบน หรือต้องการให้เมนูบาร์ติดอยู่ด้านบนสุดตลอดเวลา การจัดวางแบบธรรมดาจะทำไม่ได้เลย
การเข้าใจ Position จะช่วยให้คุณควบคุมหน้าตาของเว็บไซต์ได้เหมือนกับใช้โปรแกรมแต่งภาพ คุณจะเลิกเดาสุ่มด้วยการใส่ค่า margin (ระยะห่างรอบนอกของอิลิเมนต์) มั่วๆ เพื่อขยับของ และจะเริ่มเขียนโค้ดได้อย่างมั่นใจมากขึ้น วันนี้เราจะมาสรุป 5 ค่าหลักที่โปรแกรมเมอร์ต้องใช้จริงในงานพัฒนาเว็บมาให้เข้าใจง่ายที่สุด
Static: ค่าพื้นฐานที่มากับดวง
ค่าแรกที่เราต้องรู้จักคือ static (ค่าเริ่มต้นที่ไม่ได้กำหนดตำแหน่งพิเศษ) ซึ่งอิลิเมนต์ทุกตัวบนหน้าเว็บจะมีค่านี้ติดตัวมาตั้งแต่เกิด หากคุณไม่ได้ไปเขียนโค้ดสั่งเปลี่ยนมัน static คือการวางของตามลำดับที่มันควรจะเป็นใน HTML (ภาษาที่ใช้สร้างโครงสร้างหน้าเว็บ) โดยไม่สนใจคำสั่งอย่าง top (ระยะห่างจากด้านบน) หรือ left (ระยะห่างจากด้านซ้าย) เลยแม้แต่น้อย
เหตุผลที่ต้องรู้เรื่อง static เพราะหลายครั้งมือใหม่พยายามไปสั่งขยับอิลิเมนต์ด้วยคำสั่งตำแหน่ง แต่ลืมไปว่าตัวเองยังไม่ได้เปลี่ยน position ออกจากค่าเริ่มต้นนี้ ผลที่ได้คือโค้ดไม่ทำงานตามที่คาดหวังไว้ การรู้ว่าอะไรเป็น static อยู่ จะช่วยให้คุณไม่เสียเวลาไปกับการแก้บั๊ก (ข้อผิดพลาดของโปรแกรม) ที่ไม่ควรจะเกิดขึ้น
หากคุณต้องการย้ายอิลิเมนต์ออกจากตำแหน่งปกติ คุณต้องเปลี่ยนค่า position ให้เป็นอย่างอื่นที่ไม่ใช่ static เสมอ นี่คือจุดที่มือใหม่มักจะพลาดบ่อยที่สุดในการทำงานจริง จำไว้ว่าถ้าอยากจะควบคุมตำแหน่งอย่างอิสระ ต้องเปลี่ยนค่านี้ก่อนเสมอ
/* ตัวอย่างการตั้งค่าแบบ Static */
.box {
position: static;
top: 50px; /* คำสั่งนี้จะไม่มีผลใดๆ กับอิลิเมนต์นี้ */
}คำอธิบายโค้ด: บรรทัดที่ 3 คือการกำหนดค่า static ซึ่งเป็นค่าปกติ บรรทัดที่ 4 คือการพยายามขยับตำแหน่งด้วย top ซึ่งในโหมดนี้เบราว์เซอร์จะเพิกเฉยคำสั่งนี้โดยสิ้นเชิง
ผลลัพธ์ที่ควรเห็น: กล่อง .box จะวางตัวอยู่ตามลำดับปกติในหน้าเว็บ เหมือนไม่มีคำสั่ง top อยู่เลย
Relative: ขยับได้โดยไม่ทำร้ายใคร
ค่าต่อมาคือ relative (การกำหนดตำแหน่งโดยอ้างอิงจากตำแหน่งเดิม) เมื่อคุณเปลี่ยนอิลิเมนต์ให้เป็น relative ตัวมันจะยังคงอยู่ที่เดิมในหน้าเว็บเหมือนปกติ แต่ความพิเศษคือคุณสามารถใช้คำสั่ง top, right, bottom, left เพื่อขยับมันออกมาจากจุดที่มันเคยอยู่ได้ โดยไม่ส่งผลกระทบต่อตำแหน่งของอิลิเมนต์รอบข้างเลย
ลองนึกภาพว่าคุณมีกล่องวางเรียงกันสามกล่องบนโต๊ะ การใช้ relative เหมือนกับการที่คุณเอามือไปแตะกล่องใบกลางแล้วขยับมันขึ้นไปเล็กน้อย กล่องใบอื่นที่เหลือจะยังวางอยู่ที่เดิมเหมือนไม่มีอะไรเกิดขึ้น นี่คือเครื่องมือที่ยอดเยี่ยมสำหรับการปรับแต่งตำแหน่งเล็กๆ น้อยๆ โดยไม่ทำให้โครงสร้างหน้าเว็บพัง
จุดที่ต้องระวังคือ relative มักจะถูกใช้เป็น "ฐาน" ให้กับอิลิเมนต์ตัวอื่นที่อยู่ข้างในอีกทีหนึ่ง ซึ่งเราจะพูดถึงในหัวข้อถัดไป การเข้าใจว่า relative ไม่ได้ดึงอิลิเมนต์ออกจากหน้าเว็บจริงๆ แต่แค่ขยับภาพลักษณ์ของมันออกมา จะทำให้คุณเข้าใจการจัด Layout (การวางโครงร่างหน้าเว็บ) ได้ลึกซึ้งยิ่งขึ้น
/* ตัวอย่างการใช้ Relative */
.box {
position: relative;
top: 20px; /* ขยับลงมาจากตำแหน่งปกติ 20 พิกเซล */
left: 30px; /* ขยับไปทางขวาจากตำแหน่งปกติ 30 พิกเซล */
}คำอธิบายโค้ด: บรรทัดที่ 3 เปลี่ยนสถานะเป็น relative บรรทัดที่ 4 และ 5 คือการบอกให้ขยับจากจุดเดิมที่มันเคยอยู่ไปตามระยะที่กำหนด
ผลลัพธ์ที่ควรเห็น: กล่องจะดูเหมือนลอยออกมาจากแถวเดิมเล็กน้อย แต่พื้นที่ที่มันเคยครอบครองอยู่ก่อนขยับจะยังว่างเปล่าอยู่เหมือนเดิม
Absolute: การวางของแบบอิสระ
absolute (การกำหนดตำแหน่งแบบเจาะจง) เป็นค่าที่ทรงพลังมาก เพราะมันจะดึงอิลิเมนต์ออกจากระบบการวางปกติไปเลย และคุณสามารถวางมันไว้ที่ไหนก็ได้บนหน้าจอโดยใช้พิกัด top, left, right หรือ bottom เพื่อระบุระยะห่างจากขอบของ Parent Element (อิลิเมนต์ที่เป็นตัวห่อหุ้มหรือตัวแม่) ที่มีการกำหนดตำแหน่งเอาไว้
ถ้าไม่มีตัวแม่ที่กำหนดตำแหน่งไว้เลย absolute จะอ้างอิงจากขอบของหน้าจอเบราว์เซอร์แทน ซึ่งมักจะไม่ใช่สิ่งที่เราต้องการในการทำเว็บส่วนใหญ่ ดังนั้นเทคนิคที่โปรแกรมเมอร์ใช้กันประจำคือการกำหนดให้ตัวแม่เป็น relative แล้วให้ตัวลูกเป็น absolute วิธีนี้จะทำให้ตัวลูกวิ่งไปวางอยู่ภายในขอบเขตของตัวแม่ได้อย่างแม่นยำ
การใช้งานที่พบบ่อยที่สุดคือการทำ Badge (ป้ายกำกับขนาดเล็ก) เช่น ตัวเลขแจ้งเตือนบนไอคอนรูปกระดิ่ง หรือปุ่มกากบาทปิดหน้าต่าง Popup (หน้าต่างเด้งขึ้นมาบนหน้าเว็บ) เพราะมันช่วยให้เราวางของซ้อนทับกันได้ง่ายโดยไม่ต้องไปยุ่งกับโครงสร้างหลักของหน้าเว็บเลย
/* ตัวแม่ต้องเป็น relative เพื่อเป็นจุดอ้างอิง */
.parent {
position: relative;
}
/* ตัวลูกจะเป็น absolute ที่วิ่งไปตามแม่ */
.child {
position: absolute;
top: 10px;
right: 10px;
}คำอธิบายโค้ด: บรรทัดที่ 3 กำหนด relative ให้ตัวแม่เพื่อให้เป็นขอบเขต บรรทัดที่ 6 กำหนด absolute ให้ตัวลูกเพื่อให้อิสระในการวางตำแหน่ง บรรทัดที่ 7 และ 8 คือการระบุว่าให้ไปอยู่มุมขวาบนของตัวแม่
ผลลัพธ์ที่ควรเห็น: อิลิเมนต์ .child จะไปแปะอยู่มุมขวาบนของ .parent อย่างพอดี ไม่ว่าตัวแม่จะอยู่ที่ไหนก็ตาม
Fixed: ยึดแน่นหนึบไม่ไปไหน
fixed (การกำหนดตำแหน่งให้คงที่เสมอ) มีความคล้ายกับ absolute ตรงที่มันดึงอิลิเมนต์ออกจากหน้าเว็บปกติ แต่จุดต่างสำคัญคือมันจะยึดติดอยู่กับหน้าจอเบราว์เซอร์ของผู้ใช้ตลอดเวลา ไม่ว่าผู้ใช้จะเลื่อนเมาส์ขึ้นหรือลง หน้าเว็บจะเลื่อนไป แต่ตัวที่ตั้งค่า fixed ไว้จะยังคงแสดงอยู่ที่ตำแหน่งเดิมเสมอ
คุณคงเคยเห็นเมนูบาร์ด้านบนของเว็บไซต์ที่เลื่อนตามลงมาด้วยตลอดเวลาใช่ไหม นั่นแหละคือผลงานของ position: fixed การใช้ค่านี้ช่วยให้ประสบการณ์การใช้งานเว็บดีขึ้นมาก เพราะผู้ใช้ไม่ต้องเลื่อนหน้าจอขึ้นไปบนสุดเพื่อกดเปลี่ยนเมนู ซึ่งเป็นมาตรฐานที่เว็บแอปพลิเคชันสมัยใหม่ต้องมี
ข้อควรระวังคือ อย่าใช้ fixed มากเกินไปจนบังเนื้อหาหลักของเว็บ หรือทำให้พื้นที่ในการอ่านข้อมูลน้อยลงจนน่ารำคาญ การใช้ fixed ที่ดีควรมีขนาดกะทัดรัดและวางอยู่ในตำแหน่งที่เหมาะสม เช่น แถบเมนู หรือปุ่ม "Back to Top" (ปุ่มกลับขึ้นด้านบน) เพื่ออำนวยความสะดวกให้ผู้ใช้งาน
/* ตัวอย่างการทำ Navbar แบบติดหนึบ */
.navbar {
position: fixed;
top: 0;
width: 100%; /* ให้เต็มความกว้างหน้าจอ */
}คำอธิบายโค้ด: บรรทัดที่ 3 คือการสั่งให้เมนูยึดตำแหน่ง บรรทัดที่ 4 คือการบอกให้ชิดขอบบนสุดของหน้าจอเสมอ บรรทัดที่ 5 กำหนดขนาดให้เต็มความกว้าง
ผลลัพธ์ที่ควรเห็น: แถบเมนูจะค้างอยู่ที่ด้านบนสุดของหน้าจอเบราว์เซอร์ แม้เราจะเลื่อนหน้าเว็บลงไปด้านล่างแล้วก็ตาม
Sticky: ลูกผสมที่ฉลาดเลือก
sticky (การกำหนดตำแหน่งแบบกึ่งคงที่) เป็นค่าที่น่าสนใจที่สุด เพราะมันทำตัวเหมือน relative ในตอนแรก แต่เมื่อผู้ใช้เลื่อนหน้าจอจนถึงจุดที่กำหนด มันจะเปลี่ยนโหมดตัวเองเป็น fixed ทันที เหมาะมากสำหรับใช้กับ Table Header (หัวตารางที่บอกชื่อคอลัมน์) ที่ต้องการให้ชื่อคอลัมน์เลื่อนตามไปด้วยเวลาดูข้อมูลเยอะๆ
การใช้ sticky ต้องมีการระบุค่า top เสมอ เพื่อบอกเบราว์เซอร์ว่า "ต้องเลื่อนไปถึงจุดไหนนะ ถึงจะให้ฉันเริ่มติดหนึบ" ถ้าคุณลืมกำหนดค่านี้ sticky ก็จะทำงานเหมือน relative ปกติ และคุณจะงงว่าทำไมมันถึงไม่ยอมติดหนึบอย่างที่คิด
นี่คือเครื่องมือที่ช่วยให้การออกแบบหน้าจอ Dashboard (หน้าจอสรุปข้อมูลสำหรับผู้ใช้) ดูเป็นมืออาชีพและใช้งานง่ายขึ้นมาก ลองนำไปใช้กับหัวข้อในหน้าเว็บยาวๆ เพื่อให้ผู้ใช้รู้ว่ากำลังอ่านหัวข้อไหนอยู่ แม้จะเลื่อนลงไปอ่านเนื้อหาข้างล่างมากแค่ไหนก็ตาม
/* ตัวอย่างการใช้ Sticky กับหัวข้อ */
.header {
position: sticky;
top: 0; /* ติดหนึบเมื่อแตะขอบบน */
background: white; /* ใส่พื้นหลังเพื่อไม่ให้เนื้อหาข้างหลังโปร่งแสง */
}คำอธิบายโค้ด: บรรทัดที่ 3 คือการเปิดโหมด sticky บรรทัดที่ 4 คือจุดที่เริ่มทำงาน บรรทัดที่ 5 สำคัญมากเพราะการที่มันลอยอยู่เหนือเนื้อหาอื่น ถ้าไม่มีพื้นหลังจะทำให้อ่านลำบาก
ผลลัพธ์ที่ควรเห็น: หัวข้อจะเลื่อนไปพร้อมเนื้อหาปกติ แต่เมื่อแตะขอบบนของจอ มันจะค้างอยู่ที่เดิมจนกว่าเนื้อหาในส่วนนั้นจะเลื่อนพ้นไป
สรุป: เลือกใช้ให้ถูกงาน
การเข้าใจ CSS Position ไม่ใช่เรื่องของการจำคำสั่งได้ทั้งหมด แต่คือการรู้วิธีเลือกใช้ให้เหมาะกับสถานการณ์ Static คือค่าเริ่มต้น Relative คือการขยับเล็กน้อย Absolute คือการวางอิสระ Fixed คือการยึดติดหน้าจอ และ Sticky คือการติดหนึบเมื่อถึงเวลาที่เหมาะสม ทั้ง 5 ตัวนี้คือหัวใจสำคัญของการจัดเลย์เอาต์หน้าเว็บ
เมื่อคุณเริ่มฝึกทำโปรเจกต์ (งานที่สร้างขึ้นเพื่อฝึกฝนและแสดงความสามารถ) ลองหยิบเอาความรู้นี้ไปใช้จริง เช่น ลองทำแถบเมนูแบบ fixed หรือลองทำป้ายแจ้งเตือนบนไอคอนด้วย absolute สิ่งเหล่านี้จะทำให้คุณเห็นภาพชัดเจนกว่าการนั่งอ่านทฤษฎีเพียงอย่างเดียว การลองผิดลองถูกในโค้ดของตัวเองคือวิธีเรียนรู้ที่ดีที่สุดสำหรับโปรแกรมเมอร์มือใหม่
สุดท้ายนี้ อย่าลืมหมั่นตรวจสอบผ่านเครื่องมือ Inspect Element (เครื่องมือดูโครงสร้างโค้ดในเบราว์เซอร์) เพื่อดูว่าอิลิเมนต์แต่ละตัวถูกวางตำแหน่งอย่างไร นี่คือเครื่องมือที่โปรแกรมเมอร์ทุกคนต้องใช้ทุกวันเพื่อแก้ปัญหาและเรียนรู้จากโครงสร้างเว็บของคนอื่น ขอให้สนุกกับการจัดวางหน้าเว็บและเป็นโปรแกรมเมอร์ที่เก่งขึ้นในทุกๆ วันครับ
ที่มา: CSS Position Explained for Beginners 🎯 — DEV Community
