CSS เมนูเลื่อนตามหน้าจอ ด้วย position: fixed

สอนเขียน CSS สร้างเมนูเลื่อนตามหน้าจอ ด้วยคำสั่ง position: fixed ร่วมกับกำหนดค่า top และ left ตัวอย่างแนะนำการสร้างเมนูเว็บไซต์ด้วยคำสั่ง ul li และกำหนดให้เมนูดังกล่าวเลื่อนตามหน้าจอตลอด สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง CSS เมนูเลื่อนตามหน้าจอ ด้วย position: fixed

<style>
  * {
    padding: 0;
    margin: 0;
  }
  ul {
    width: 100%;
    display: flex;
    text-align:center;
    background-color: #eee;
    position: fixed;
    top: 0;
    left: 0;
  }
  ul li {
    list-style: none;
    width: 100%;
    padding: 1rem;
  }
</style>

<ul>
  <li>หน้าแรก</li>
  <li>สินค้า</li>
  <li>ติดต่อเรา</li>
</ul>

CSS เมนูเลื่อนตามหน้าจอ ตัวอย่างสร้างเมนูด้วย ul และกำหนดแต่ละเมนูด้วย li โดยคำสั่ง CSS ที่ทำให้เมนูเลื่อนตามหน้าจอ ส่วนสำคัญคือ position: fixed หมายความว่ากำหนดให้ elements ดังกล่าวมีตำแหน่งการแสดงผลที่หน้าเว็บไซต์แบบคงที่ ถาวร โดยกำหนดตำแหน่งร่วมกับคำสั่ง top: 0 และ left: 0 คืออยู่ชิดด้านบนมุมซ้ายของเว็บไซต์ตลอด ทำให้เมนูดังกล่าวมีคุณสมบัติเลื่อนตามหน้าจอ