คุณสมบัติตำแหน่งใช้ในการวางตำแหน่งองค์ประกอบ กล่าวคือ ต่อไปนี้คือองค์ประกอบการจัดตำแหน่ง −
-
คงที่ − กล่ององค์ประกอบถูกจัดวางให้เป็นส่วนหนึ่งของโฟลว์เอกสารปกติ ตามองค์ประกอบก่อนหน้าและอยู่ข้างหน้าองค์ประกอบที่ตามมา
-
ญาติ − กล่องขององค์ประกอบถูกจัดวางให้เป็นส่วนหนึ่งของการไหลปกติ แล้วชดเชยด้วยระยะทางบางส่วน
-
แน่นอน − กล่องขององค์ประกอบถูกจัดวางโดยสัมพันธ์กับบล็อกที่บรรจุอยู่ และถูกนำออกจากโฟลว์ปกติของเอกสารทั้งหมด
-
แก้ไข − กล่องขององค์ประกอบอยู่ในตำแหน่งที่แน่นอน โดยมีพฤติกรรมทั้งหมดที่อธิบายไว้สำหรับตำแหน่ง:แบบสัมบูรณ์
ต่อไปนี้เป็นรหัสสำหรับองค์ประกอบการวางตำแหน่งโดยใช้ CSS -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
color: white;
text-align: center;
height: 100px;
width: 100px;
}
.static {
position: static;
background-color: greenyellow;
}
.relative {
position: relative;
left: 50px;
background-color: rgb(255, 47, 47);
}
.absolute {
position: absolute;
right: 50px;
top: 20px;
background-color: hotpink;
}
</style>
</head>
<body>
<h1>Position elements example</h1>
<div class="static">STATIC</div>
<div class="relative">RELATIVE</div>
<div class="absolute">ABSOLUTE</div>
</body>
</html> ผลลัพธ์
รหัสข้างต้นจะสร้างผลลัพธ์ต่อไปนี้ -
