แก้ไขตำแหน่งโดยใช้ CSS

เราสามารถกำหนดตำแหน่งขององค์ประกอบใน CSS แบบคงที่ ซึ่งแสดงองค์ประกอบที่สัมพันธ์กับวิวพอร์ตของผู้ใช้ องค์ประกอบที่มีวิธีการกำหนดตำแหน่งเป็นตายตัวจะไม่เคลื่อนที่แม้ในการเลื่อนและถูกจัดตำแหน่งตามคุณสมบัติการจัดตำแหน่ง CSS (ซ้าย ขวา บนและล่าง)

ตัวอย่าง

มาดูตัวอย่าง CSS Fixed 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>What is ASP.NET?</div>
<p>ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites............</p>
<div>
</div>
</body>
</html>

ผลลัพธ์

ต่อไปนี้เป็นผลลัพธ์สำหรับโค้ดด้านบน -

แก้ไขตำแหน่งโดยใช้ CSS

ตัวอย่าง

มาดูตัวอย่างวิธีการกำหนดตำแหน่งกัน −

<!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">Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies. <mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html>

ผลลัพธ์

ต่อไปนี้เป็นผลลัพธ์สำหรับโค้ดด้านบน -

แก้ไขตำแหน่งโดยใช้ CSS