การใช้ Property position ใน CSS ช่วยให้เราจัดการตำแหน่งของ element บนหน้าเว็บได้ตามที่เราต้องการ โดยการกำหนดค่าใน property position จะมีหลายค่าดังนี้
การใช้ Property position ใน CSS
static: เป็นค่าเริ่มต้นของ element ไม่สามารถใช้ top, bottom, left, right ในการกำหนดตำแหน่งได้
relative: จะทำให้เราสามารถกำหนดตำแหน่งของ element ได้โดยใช้ top, bottom, left, right แต่จะไม่มีผลกระทบต่อตำแหน่งของ element อื่น
absolute: จะทำให้เราสามารถกำหนดตำแหน่งของ element โดยใช้ top, bottom, left, right และจะต่อให้ element อื่นๆ อยู่ไหนก็ตาม ตำแหน่งของ element นี้ก็จะอยู่บนสุด
fixed: เหมือนกับ absolute แต่จะติดตั้งโดยไม่ได้พึ่งพาตำแหน่งของ element ใดๆ แต่จะติดตั้งบนท้องฟ้าเสมือนแถบเมนูหรือปุ่ม scroll ซึ่งจะติดตามผู้ใช้งานตลอดเวลา
การใช้ Property position ในการจัดตำแหน่งนั้นมีความยืดหยุ่นสูง และอาจนำมาใช้ร่วมกับ Property อื่นๆ เช่น z-index, margin, padding, transform หรือ animation เพื่อสร้างเอฟเฟกต์หรือการเคลื่อนไหวให้กับ element ได้มากขึ้น
.container {
position: relative;
height: 400px;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: #3498db;
color: #fff;
text-align: center;
font-size: 24px;
}
โดยโค้ดนี้จะสร้าง container หรือพื้นที่เชิงพื้นที่บนหน้าเว็บไซต์ ซึ่งกำหนดให้มีความสูง 400px และเป็นตำแหน่งพื้นฐานของ box ซึ่งเป็น element ย่อยของ container โดย box จะถูกกำหนด Property position: absolute ซึ่งจะช่วยให้ box สามารถกำหนดตำแหน่งของมันเองโดยใช้ top, left และ transform ได้ ในที่นี้จะกำหนดให้ box ตั้งอยู่ตรงกลางของ container ด้วย top: 50% และ left: 50% และ transform: translate(-50%, -50%) จะช่วยให้ box ตรงกลางแนวตั้งและแนวนอน โดยอ้างอิงจากจุดกึ่งกลางของ box ด้วย และเพิ่มเติม Property อื่นๆ เช่น background-color, color, text-align, font-size เพื่อปรับแต่งลักษณะของ box ให้สวยงามขึ้น