[CSS] Position

최근 Position에 관련된 내용을 다시 보게 되서 정리해보려고 한다.

position value

static

• position의 기본값
• position에 관련된 속성(top, left 등)을 사용해도 영향을 받지 않는다.

relative

• 원래 있던 공간을 유지하면서 position에 관련된 속성 값만큼 상대적으로 옮겨 가는 것
• 다른 요소들의 위치에 영향을 주지 않는다.

.box {
  position: relateive;
  top: 20px;
  left: 100px;
}

absolute

• static이 아닌 부모 요소를 기준으로 영향을 받는다.
• 부모 요소 중 static을 제외한 어떠한 position value가 없으면 body를 기준으로 position에 관련된 속성에 영향을 받는다.
• body가 기준이 되면 absolute를 가진 요소는 화면 전체를 width, height로 적용한다.

.box {
  position: absolute;
  top: 20px;
  left: 50px;
}

그렇다면 body 요소는 position이 어떻게 될까?
body 요소의 기본 css 값에는 position이 없다.

body 요소의 css 기본 값

body {
  display: block;
  margin: 8px;
}

body:focus {
  outline: none;
}

body의 position을 변화시켰을 때 특정 요소(absolute)의 위치에도 변화가 있다.

1. body의 position이 relative이고 특정 요소는 absolute

   특정 요소의 width는 화면 전체를 기준으로 적용되고, height는 body의 height를 기준으로 적용된다.

2. body의 position이 absolute이고 특정 요소도 absoulte

   특정 요소는 body가 가지고 있는 컨텐츠만큼의 크기를 차지한다.
   특정 요소의 width와 height는 body의 width와 height를 기준으로 적용된다.
   그래서 특정 요소는 화면 전체 크기를 기준으로 움직이지 않는다.

stickey

• 사용할 때는 반드시 position 속성(top, left 등)을 지정해줘야 한다.
• 부모 요소 안에서 position이 지정된다.
  - 부모 요소의 position은 상관없다.

.box {
  position: stickey;
  top: 20px;
  left: 0px;
  background-color: indigo;
}

fixed

• 무조건 viewport에서 position 변경이 일어난다.

.box {
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: beige;
}