Static Positioning ใน CSS (ตำแหน่งคงที่)

เมื่อใช้ Static Positioning องค์ประกอบจะไม่ได้รับผลกระทบจากคุณสมบัติ top, bottom, left, และ right ใช้ position: static (ค่าเริ่มต้นของทุกองค์ประกอบ)

ตัวอย่าง

<!DOCTYPE html> <html> <head> <style> div.static {    position: static;    color: white;    background-color: orange;    border: 2px dashed blue; } </style> </head> <body> <h2>Demo Heading</h2> <p>This is demo text.</p> <p>This is demo text.</p> <div class="static"> position: static; </div> <p>This is another demo text.</p> </body> </html>

ผลลัพธ์

คุณสมบัติของ Static Positioning

• เป็นค่าเริ่มต้น (default) ของทุกองค์ประกอบ HTML
• อยู่ใน normal document flow (ลำดับตามโค้ด HTML)
• ไม่ได้รับผลกระทบ จาก top, right, bottom, left, z-index
• ไม่สร้าง stacking context ใหม่
• ไม่สามารถใช้ z-index ควบคุมลำดับชั้นได้

เปรียบเทียบ Positioning ทั้ง 5 แบบ

เมื่อไหร่ควรใช้ static? แทบทุกครั้งที่ไม่ต้องการจัดตำแหน่งพิเศษ - ให้ปล่อยไว้เป็นค่าเริ่มต้น