CSS에서 위치 지정 시 음수 값

우리가 배운 속성인 top, right, bottom 및 left는 양수 값뿐만 아니라 음수 값도 가질 수 있습니다. 예제를 통해 살펴보겠습니다.

예제

다음 예제에서 요소는 부모를 기준으로 절대 위치가 지정되며 상단에서 0, 왼쪽에서 0 위치에 있습니다:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 0;
  left: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

예제

이제 요소를 상단에서 -20px, 왼쪽에서 -30px 위치로 이동시켜 보겠습니다:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: -20px;
  left: -30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат: