CSS 레이아웃 - position: relative; 속성

position: relative;

의 요소 position: relative;는 그 통상의 위치에 상대적으로 배치됩니다.

상대적으로 배치 된 요소의 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 설정하면 해당 요소가 정상 위치에서 벗어나 조정됩니다. 다른 콘텐츠는 요소가 남긴 모든 틈에 맞춰 조정되지 않습니다.

이 <div> 요소의 위치는 relative입니다.

다음은 사용 된 CSS입니다.

예

div.relative {

    position: relative;

    left: 30px;

    border: 3px solid #73AD21;

}

<!DOCTYPE html>

<html>

<head>

<style>

div.relative {

    position: relative;

    left: 30px;

    border: 3px solid #73AD21;

}

</style>

</head>

<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative">

This div element has position: relative;

</div>

</body>

</html>