CSS กำหนดให้ div ชิดขอบด้านบนเว็บไซต์

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

ตัวอย่าง CSS กำหนดให้ div ชิดขอบด้านบนเว็บไซต์

<style>
    .my_title_bar {
        width: 100%;
        height: auto;
        padding: 10px;
        background-color: blue;
        position: fixed;
        top: 0px;
        left: 0px;
        color: #FFF;
        text-align: center;
    }
</style>

<div class="my_title_bar">Devdit</div>

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

2. กำหนดค่าความกว้าง width และความสูง height

3. นำ class .my_title_bar ไปใช้งานกับ div เพื่อกวางให้ div ชิดขอบด้านบนเว็บไซต์เสมอ