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

div ลอย เลื่อนตามหน้าจอ ด้วย CSS position: fixed บทความนี้สอนการกำหนดให้แท็ก div ของ HTML มีลักษณะการแสดงผลแบบลอยอยู่เหนือ elements อื่น และเลื่อนตามหน้าจอ ด้วยคำสั่ง position สามารถเขียนโปรแรกมได้ดังนี้

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

<style>
    .box {
        position: fixed;
        width: 100px;
        height: 100px;
        background: green;
        margin: 5rem;
    }
</style>

<div class="box"></div>

div ลอย เลื่อนตามหน้าจอ ด้วย CSS จากตัวอย่างกำหนด position: fixed ให้กับ class box และนำ class ดังกล่าวไปใช้กับ div ทำให้ div มีคุณสมบัติลอย และเลื่อนตามหน้าจอ จากผลลัพธ์ div สีเขียวจะลอยอยู่เหนือตัวเลข และเมื่อ scroll หน้าเว็บไซต์ขึ้น ลง div จะเลื่อนตามหน้าจอ