กำหนดตำแหน่ง CSS

หมดปัญหาการจัดวางตำแหน่งองค์ประกอบด้วย CSS ให้ใช้งานได้ง่ายๆ หรืออยากจะหาทางลัดที่ช่วยสรุปรวมคำสั่งที่ใช้บ่อยอย่างเช่น padding, margin, position ต่างๆ ให้งานได้ง่ายมากขึ้น เพราะเป็นแบบ interact ให้หมุนปรับค่าและเห็นภาพเองได้เลย เหมาะกับคนที่ใช้งานคำสั่งเหล่านี้อยู่บ่อยๆ ว่าอะไรทำงานอย่างไรไปดูกันเลย

1. คำสั่งพื้นฐาน ความกว้างและความสูง ก็จะมีการอธิบายคำสั่งอย่างละเอียดในการกำหนดความกว้างและความสูง และสามารถปรับเปลี่ยนได้เองเลยง่ายมากๆ เลย

2. คำสั่งที่ใช้กับอยู่บ่อยๆ คือ คำสั่งกำหนดตำแหน่งบน และตำแหน่งซ้าย ค่าเหล่านี้จะถูกกำหนดให้ขึ้นอยู่กับความกว้างและสูงด้วย หากองค์ประกอบมีค่าด้านซ้าย 50% ด้านซ้ายจะอยู่กึ่งกลางของพื้นที่สีม่วง

3. คำสั่งต่อไปคือ คำสั่งกำหนดระยะขอบด้านบนและด้านซ้าย เพื่อเป็นตัวกำหนดให้ได้อยู่ในตำแหน่งที่ต้องการโดยจะสร้างพื้นที่ว่างมาแทนที่ ด้วยคำสั่ง margin แล้วต่อด้วยตำแหน่งบนหรือซ้ายตามที่ต้องการ

4. คำสั่ง padding คำสั่งกำหนดระยะขอบด้านบนและด้านซ้าย เพื่อเป็นตัวกำหนดให้ได้อยู่ในตำแหน่งที่ต้องการโดยจะขยายพื้นที่ให้มาแทนที่ ด้วยคำสั่ง padding จะทำให้องค์ประกอบขยายตามขนาดที่กำหนด

5. หรือจะเป็นคำสั่งที่เคลื่อนย้ายตำแหน่งโดยใช้ คำสั่ง transform:translate(ตำแหน่งซ้าย , ตำแหน่งบน) โดยจะเป็นการกำหนดตำแหน่งบนและซ้ายเพื่อให้อยู่ในตำแหน่งที่ต้องการ

หรือลองเข้าไปใช้งานเองได้ที่ https://wattenberger.com/blog/css-percents

กำหนดตำแหน่ง CSS