CSS에서 요소의 위치를 상대적으로 정의하여 요소를 정상적으로 렌더링할 수 있습니다. 위치 지정 방법이 상대적인 요소는 CSS 위치 지정 속성(왼쪽, 오른쪽, 위쪽 및 아래쪽)에 의해 배치됩니다.
예시
CSS 상대 위치 지정 방법의 예를 살펴보겠습니다 -
<!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> 출력
다음은 위의 코드에 대한 출력입니다 -
예시
포지셔닝 방법의 또 다른 예를 보자 -
<!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> 출력
이것은 다음과 같은 출력을 제공합니다:−
