จัด position CSS ทำยังไง ตัวอย่าง

จัด position CSS ทำยังไง บทความนี้สอนใช้คำสั่ง position เพื่อจัดตำแหน่งของ elements โดยบทความนี้สอน position relative ร่วมกับการเคลื่อนตำแหน่ง elements ทั้ง 4 ทิศทาง สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง จัด position CSS ทำยังไง

<style>
    .box {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        top: 50px;
        left: 50px;
    }
</style>

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

จัด position CSS จากตัวอย่างใช้คำสั่ง position กำหนดค่าเป็น relative โดยสามารถกำหนด หรือเคลื่อนตำแหน่งของ elements ได้ 4 ทิศทางคือ

1. top คือ จัด position ของ elements ให้เคลื่อนที่จากด้านบนลงด้านล่าง

2. left คือ จัด position ของ elements ให้เคลื่อนที่จากด้านซ้ายไปด้านขวา

3. right คือ จัด position ของ elements ให้เคลื่อนที่จากด้านขวาไปด้านซ้าย

4. bottom คือ จัด position ของ elements ให้เคลื่อนที่จากด้านล่างขึ้นด้านบน