HTML ปุ่มลอย เลื่อนตามหน้าจอเว็บไซต์ ด้วยภาษา CSS

สอนเขียน HTML ปุ่มลอย เลื่อนตามหน้าจอเว็บไซต์ ด้วยคำสั่ง position: fixed ของภาษา CSS คำสั่ง position: fixed ใช้สำหรับกำหนดให้ elements ใดๆ ก็ตามมีตำแหน่งที่แน่นอน ตายตัว เลื่อนตามหน้าจอ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง HTML ปุ่มลอย เลื่อนตามหน้าจอเว็บไซต์ ด้วยภาษา CSS

<style>
    .btn {
        position: fixed;
        right: 0px;
        bottom: 0px;
        margin: 1rem;
    }
</style>

<input type="button" value="ปุ่มลอย" class="btn">

ปุ่มลอย HTML แนะนำให้ใช้ภาษา CSS คำสั่ง position: fixed ร่วมกับ right: 0 และ bottom: 0 เพื่อให้ปุ่มอยู่ขวาล่างของเว็บไซต์ตลอด แบบปุ่มลอย เลื่อนตามหน้าจอ โดยตัวอย่างเขียนคำสั่งดังกล่าวไว้ที่ class btn จากนั้นนำ class ดังกล่าวไปใช้งานกับปุ่มแท็ก input type button เพื่อทำให้เป็นปุ่มลาย เลื่อนตามหน้าจอ