Devdit
 

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

1.7K

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 จะเลื่อนตามหน้าจอ

แก้ไข 1 ปีที่แล้ว
ชอบ
ลิ้งก์
แชร์
Devdit มีช่อง YouTube แล้ว
เราสร้างวิดีโอเกี่ยวกับเทคโนโลยี ทำตามง่ายๆ