CSS에서 요소의 상대적 위치 지정

상대적 위치 지정은 position 속성에 relative 값을 사용하여 설정합니다. 이러한 위치 지정은 요소를 현재 위치를 기준으로 지정된 값만큼 이동시킬 수 있습니다. 이때 페이지의 다른 모든 요소는 해당 요소가 원래 있던 자리에 그대로 있다고 인식합니다. 즉, 이러한 유형의 위치 지정에서 요소는 일반적인 흐름에서 벗어나지 않습니다.

현재 위치로부터의 오프셋은 top, right, bottom 및 left 속성으로 지정합니다.

예시

먼저, 위치 지정 없이 두 개의 블록을 만들어 보겠습니다:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

예시

이제 첫 번째 블록에 relative를 추가해 보겠습니다. 블록의 오프셋을 지정하지 않았기 때문에 아직 아무것도 변경되지 않습니다:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

예시

이제 top 속성을 지정하여 블록을 위에서 30px 만큼 이동시켜 보겠습니다. 이때 다른 모든 요소는 우리 블록이 원래 있던 자리에 그대로 있는 것처럼 동작합니다:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

예시

left 속성을 지정하여 블록을 왼쪽에서 40px 만큼 이동시켜 보겠습니다:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  left: 40px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

예시

top, right, bottom 및 left 속성의 음수 값은 반대 방향으로 이동시킵니다. 예를 들어, top의 양수 값은 아래로 이동시키고, 음수 값은 위로 이동시킵니다.

두 번째 블록에 top 속성의 음수 값을 지정하여 40px 만큼 위로 이동시켜 보겠습니다:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  position: relative;
  top: -40px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

실습 문제

html<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text

css#elem1 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #FF8888;
}
#elem2 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #7E89EB;
}
#elem3 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #4DEE99;
}