[HTML/CSS] Position 속성

Position 속성

---

Position속성은 태그의 위치를 정의할 때 사용된다. HTML태그 순서와 상관없이 위치를 지정할 수 있으며, 복잡한 레이아웃을 구성하는 데 유용하다.

Position속성은 아래 4가지 정도의 값을 가질 수 있는데, static은 자주 쓰이지 않으므로 나머지 3가지 값에 대해서만 알아보았다.

✔ Position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지니 주의할 것

• static
• relative: 원래 있던 위치를 기준으로 좌표를 지정
• absolute: 특정 부모에 대해 절대적으로 움직임
• fixed: 스크롤과 상관없이 항상 고정

absolute와 relative

relative 인 부모요소 내부에 absolute인 객체가 있으면 절대 좌표를 계산할 때, relative 요소를 기준점으로 잡게 된다. (만약 없다면 전체 문서가 기준이 됨)

절대적 좌표는 left, right, top, bottom로 지정해주면 된다.

.relative {
  position: relative;
}
.absolute {
  position: absolute;
  right: 0;
  bottom: 0;
}

위와 같이 작성하면, absolute 박스는 relative 박스로 부터 우측으로 0px, 바닥에서 0px 만큼 떨어져 위치하게 된다.

fixed

absolute는 relative를 가진 부모가 필요하지만, fixed는 필요없다.
fixed는 눈에 보이는 브라우저 화면 크기만큼 화면 내에서만 움직인다.

.fixed {
  position: fixed;
  right: 0;
  bottom: 0;

위와 같이 코드를 작성하면 화면 최우측 하단에 fixed 요소가 위치하게 된다.