เราสามารถกำหนดตำแหน่งขององค์ประกอบใน CSS เป็นแบบสัมบูรณ์ ซึ่งแสดงองค์ประกอบที่สัมพันธ์กับพาเรนต์ตำแหน่งแรก (ยกเว้นแบบคงที่) องค์ประกอบที่มีวิธีการกำหนดตำแหน่งแบบสัมบูรณ์จะถูกจัดตำแหน่งโดยคุณสมบัติการจัดตำแหน่ง CSS (ซ้าย ขวา บนและล่าง)
ตัวอย่าง
มาดูตัวอย่างสำหรับ CSS Absolute Positioning Method -
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div:first-child {
background-color: orange;
text-align: center;
}
div:last-child {
width: 250px;
height: 100px;
margin: auto;
background-color: turquoise;
position: absolute;
z-index: -1;
top:0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>Demo text</div>
<p>ICC is International Cricket Council is the governing body of Cricket founded in 1909........</p>
<div>
</div>
</body>
</html> ผลลัพธ์
ต่อไปนี้เป็นผลลัพธ์สำหรับโค้ดด้านบน -
ตัวอย่าง
มาดูตัวอย่างวิธีการกำหนดตำแหน่งกัน −
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px double #a43356;
margin: 5px;
padding: 5px;
}
#d1 {
position: relative;
height: 10em;
}
#d2 {
position: absolute;
width: 20%;
bottom: 10px; /*relative to parent d1*/
}
#d3 {
position: fixed;
width: 30%;
top:10em; /*relative to viewport*/
}
</style>
</head>
<body>
<div id="d1">MySQL is the most popular Open Source Relational SQL Database Management System.
MySQL is one of the best RDBMS being used for developing various web-based software applications. <mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html> ผลลัพธ์
ต่อไปนี้เป็นผลลัพธ์สำหรับโค้ดด้านบน -
