📋 Position 속성

CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정한다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용된다.

CSS Position 속성을 알아보기 위해, 축구 필드에서 손흥민을 position 속성을 이용해 이동시켜보겠다.

HTML

  <div id="bg">
    <div id="son"></div>
  </div>

CSS

#bg {
  background: url(./bg.png) no-repeat;
  background-size: cover;
  height: 486px;
  width: 768px;
}

#son {
  background: url(./son.png);
  background-size: cover;
  height: 110px;
  width: 50px;
}

---

📌 1. position : static;

요소를 일반적인 문서 흐름에 따라 배치한다. top , right (en-US), bottom (en-US), left (en-US), z-index 속성이 아무런 영향도 주지 않는다. 기본값이다.

static은 position 속성의 default값이다. son에게 position: static 을 적용해도 위 사진 그대로이다.

사실상 거의 사용하지 않는다.

---

📌 2. position : relative;

요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다. 오프셋은 다른 요소에는 영향을 주지 않는다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다.

top, right, bottom, left 값을 이용해 요소를 static위치를 기준으로 이동시킬 수 있다.

이를 이용해 son을 이동시켜보겠다.

#son {
  background: url(./son.png);
  background-size: cover;
  height: 110px;
  width: 50px;

  position: relative;
  top: 100px;
  left: 550px;
}

---

📌 3. position : absolute;

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않고, 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치한다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼는다. 최종 위치는 top, right, bottom, left 값이 지정한다.

position 속성이 relative인 부모 혹은 조상요소를 기준으로 해 top, right, bottom, left 값을 조정하여 이동할 수 있다.

#bg {
  background: url(./bg.jpg) no-repeat;
  height: 486px;
  width: 768px;

  position: relative;
}

#son {
  background: url(./son.png);
  background-size: cover;
  height: 110px;
  width: 50px;

  position: absolute;
  bottom: 0px;
  left: 50%;
}

bg의 position은 relative,
son의 position은 absolute로 설정하고, bottom과 left값을 설정했다.

이렇게 부모요소를 기준으로 son이 이동했다.
그런데 left 값을 50%를 줬는데 정중앙이 아닌 살짝 오른쪽으로 나와있다.

그 이유는 무엇일까?
바로 기준점에서 bg의 50%만큼 이동했지만, son.png파일의 width 크기만큼 튀어나오게 된 것이다.

이를 수정하려면 left값을 수정하거나, margin-left값을 주는 방법 등이 있다.
한번 margin-left값을 주어 son의 위치를 중앙으로 옮겨보겠다.

#son {
  background: url(./son.png);
  background-size: cover;
  height: 110px;
  width: 50px;

  position: absolute;
  bottom: 0px;
  left: 50%;
  margin-left: -25px;
}

margin-left값을 son의 width인 50px의 절반만큼을 음수값으로 설정했다.

제대로 중앙에 위치하게 되었다.

---

📌 4. position : fixed;

position: fixed;인 요소는 뷰포트에 상대적으로 위치하므로 페이지를 스크롤하더라도 항상 같은 위치에 유지된다. 최종 위치는 top, right, bottom, left 값이 지정한다.

position 속성이 fixed인 요소는 페이지를 스크롤하더라도 항상 같은 위치에 고정된다.

웹페이지를 제작할 때, nav bar를 상단에 고정하는 방식 등으로 사용할 수 있다.

#son {
  background: url(./son.png);
  background-size: cover;
  height: 110px;
  width: 50px;

  position: fixed;
  left: 300px;
  top: 300px;
}

이처럼 페이지 스크롤을 내려도 항상 한곳에 고정되어있다.

---

📌 5. position : sticky;

요소의 위치는 사용자의 스크롤 위치를 기준으로 한다. sticky 요소는 스크롤 위치에 따라 상대 요소와 고정 요소 사이를 전환한다. 뷰포트에서 주어진 오프셋 위치가 충족될 때까지 상대적인 위치에 배치된다. 그런 다음 "고정된 위치"와 같이 제자리에 "고정"된다.

스크롤 될 때, 자신의 부모의 범위 안에서만 고정되어있다.
자신의 부모 위치가 뷰포인트에서 벗어나면 일반적인 흐름을 따른다.
sticky는 top, right, bottom, left 속성중 하나이상을 필수로 사용해야한다.

#son {
  background: url(./son.png);
  background-size: cover;
  height: 110px;
  width: 50px;

  position: sticky;
  left: 300px;
  top: 0px;
}

부모요소 내에선, 스크롤을 내리면 이동하지만,
아까의 fixed와는 다르게 부모요소에서는 벗어나지 못한다.