ตำแหน่งสัมพัทธ์ทำงานใน CSS

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

ตัวอย่าง

มาดูตัวอย่าง CSS Relative Positioning Method กัน −

<!DOCTYPE html>
<html>
<head>
<style>
p {
   margin: 0;
}
div:first-child {
   position: relative;
   top:20px;
   background-color: orange;
   text-align: center;
}
</style>
</head>
<body>
<div>PostgreSQL</div>
<p>PostgreSQL is a powerful, open source object-relational database system.
It has more than 15 years of active development.................</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">PhoneGap is a software development framework by Adobe System, which is used to develop mobile applications. To develop apps using PhoneGap, the developer does not require to have knowledge of mobile programming language but only web-development languages like, HTML, CSS, and JScript.<mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html>

ผลลัพธ์

สิ่งนี้ให้ผลลัพธ์ต่อไปนี้:−

ตำแหน่งสัมพัทธ์ทำงานใน CSS