เราสามารถกำหนดตำแหน่งขององค์ประกอบใน CSS เป็นแบบคงที่ซึ่งไม่ได้แสดงองค์ประกอบในลักษณะพิเศษใด ๆ แต่ในลักษณะปกติ องค์ประกอบที่มีการจัดตำแหน่งเป็นแบบคงที่จะไม่ได้รับผลกระทบจากคุณสมบัติการจัดตำแหน่ง CSS ใดๆ (ซ้าย ขวา บนและล่าง)
ตัวอย่าง
มาดูตัวอย่าง CSS Static Positioning Method กัน −
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 0;
}
div:first-child {
position: static;
background-color: orange;
text-align: center;
}
</style>
</head>
<body>
<div>Demo text</div>
<p>This is demo text wherein we are displaying an example for static positioning.</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">This is demo paragraph. This is demo paragraph.
This is demo paragraph. This is demo paragraph.
This is demo paragraph. This is demo paragraph.
This is demo paragraph. This is demo paragraph.
<mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html> ผลลัพธ์
ต่อไปนี้เป็นผลลัพธ์สำหรับโค้ดด้านบน -
