| position | ใช้กำหนดรูปแบบวิธีการจัดวางตำแหน่งของ element |
|---|---|
| top | ใช้กำหนดระยะห่างระหว่าง ขอบด้านบน เมื่อเทียบกับ element |
| right | ใช้กำหนดระยะห่างระหว่าง ขอบด้านขวา เมื่อเทียบกับ element |
| bottom | ใช้กำหนดระยะห่างระหว่าง ขอบด้านล่าง เมื่อเทียบกับ element |
| left | ใช้กำหนดระยะห่างระหว่าง ขอบด้านซ้าย เมื่อเทียบกับ element |
| float | ใช้กำหนดตำแหน่งของ element ว่าให้ชิดขวาหรือชิดซ้าย |
| clear | ใช้สิ้นสุดการจัดตำแหน่งของ element ด้วย property float |
| z-index | ใช้กำหนดลำดับชั้น บน-ล่าง ในกรณีที่ element ซ้อนกัน |
| chip | ใช้กำหนดรูปแบบของ element โดยส่วนใหญ่จะใช้กับการ กำหนดรูปร่างของรูปภาพ หรือรูปเรขาคณิต |
| overflow-x | ใช้กำหนดวิธีการจัดการกับข้อมูลที่ overflow ในแกน x |
| overflow-y | ใช้กำหนดวิธีการจัดการกับข้อมูลที่ overflow ในแกน y |
| overflow | ใช้กำหนดวิธีการจัดการกับข้อมูลที่ overflow ทั้งแกน x และแกน y |
property:position
value:fixed เป็นการวางตำแหน่งอย่างตายตัว, static เป็นการวางตำแหน่งตามลำดับก่อน-หลัง, absolute เป็นการวางตำแหน่งโดยดูจากแกน x, y และเทียบจาก tag แม่, relative เป็นการวางตำแหน่งโดยดูจาก x, y และเทียบจาก tag มันเอง
content:ใช้กำหนดรูปแบบวิธีการจัดวางตำแหน่งของ element
example:{ position: absolute; }
property:top
value:auto, cm, px, pt
content:ใช้กำหนดระยะห่างระหว่าง ขอบด้านบน เมื่อเทียบกับ element
example:{ top: -30px; }
property:right
value:auto, cm, px, pt
content:ใช้กำหนดระยะห่างระหว่าง ขอบด้านขวา เมื่อเทียบกับ element
example:{ right: 50px; }
property:bottom
value:auto, cm, px, pt
content:ใช้กำหนดระยะห่างระหว่าง ขอบด้านล่าง เมื่อเทียบกับ element
example:{ bottom: -80px; }
property:left
value:auto, cm, px, pt
content:ใช้กำหนดระยะห่างระหว่าง ขอบด้านซ้าย เมื่อเทียบกับ element
example:{ left: 20px; }
property:float
value:left, right, none
content:ใช้กำหนดตำแหน่งของ element ว่าให้ชิดขวาหรือชิดซ้าย
example:{ float: none; }
property:clear
value:left, right, both
content:ใช้สิ้นสุดการจัดตำแหน่งของ element ด้วย property float ก่อนที่จะจัดตำแหน่งด้วยวิธีอื่นต่อไป
example:{ clear: both; }
property:z-index
value:auto, ตัวเลข
content:ใช้กำหนดลำดับชั้น บน-ล่าง ในกรณีที่ element ซ้อนกัน โดยตัวเลขที่มากกว่าจะอยู่ทับตัวเลขที่น้อยกว่า
example:{ z-index: 3; }
property:chip
value:auto, shape
content:ใช้กำหนดรูปแบบของ element โดยส่วนใหญ่จะใช้กับการ กำหนดรูปร่างของรูปภาพ หรือรูปเรขาคณิต
example:{ chip: auto; }
property:overflow-x
value:auto, visible, hidden, scroll
content:ใช้กำหนดวิธีการจัดการกับข้อมูลที่ overflow ในแกน x ( ว่าจะให้มี scroll bar หรือไม่ อย่างไร )
example:{ overflow-x: visible }
property:overflow-y
value:auto, visible, hidden, scroll
content:ใช้กำหนดวิธีการจัดการกับข้อมูลที่ overflow ในแกน y ( ว่าจะให้มี scroll bar หรือไม่ อย่างไร )
example:{ overflow-y: scroll; }
property:overflow
value:auto, visible, hidden, scroll
content:ใช้กำหนดวิธีการจัดการกับข้อมูลที่ overflow ทั้งแกน x และแกน y ( ว่าจะให้มี scroll bar หรือไม่ อย่างไร )
example:{ overflow: hidden; }
