เราสามารถกำหนดการจัดตำแหน่งขององค์ประกอบใน CSS เป็น static ซึ่งจะแสดงองค์ประกอบในวิธีปกติ ไม่ใช่วิธีพิเศษ องค์ประกอบที่มีการจัดตำแหน่งเป็น static จะไม่ได้รับผลกระทบจากคุณสมบัติการจัดตำแหน่ง CSS ใดๆ (left, right, top และ bottom)
ตัวอย่าง
ลองดูตัวอย่างของวิธีการจัดตำแหน่งแบบ Static ใน CSS:
<!DOCTYPE html> <html> <head> <style> p { margin: 0; } div:first-child { position: static; background-color: orange; text-align: center; } </style> </head> <body> <div>Demo text</div> <p>This is demo text wherein we are displaying an example for static positioning.</p> <div></div> </body> </html>
ผลลัพธ์
ผลลัพธ์สำหรับโค้ดข้างต้น:
ตัวอย่าง
ลองดูตัวอย่างเพิ่มเติมของวิธีการจัดตำแหน่ง:
<!DOCTYPE html> <html> <head> <style> div { border: 2px double #a43356; margin: 5px; padding: 5px; } #d1 { position: relative; height: 10em; } #d2 { position: absolute; width: 20%; bottom: 10px; /*relative to parent d1*/ } #d3 { position: fixed; width: 30%; top:10em; /*relative to viewport*/ } </style> </head> <body> <div id="d1">This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. <mark>relative</mark> <div id="d2"><mark>absolute</mark></div> <div id="d3"><mark>fixed</mark></div> </div> </body> </html>
ผลลัพธ์
ผลลัพธ์สำหรับโค้ดข้างต้น:
