[CSS] position 속성 정리

 

position은 HTML 태그의 위치를 조정할 수 있는 속성이다.

position 속성 값으로 올 수 있는 것은 5가지가 있다.

 

1. static

2. relative

3. absolute

4. fixed

5. sticky

---

 

1. static

• static은 기본값으로 position을 지정하지 않을 때와 같다.

• static은 html에 정의된 순서대로 브라우저상에서 자연스럽게 보여지게 된다.

• static을 주면 top, right, bottom, left 속성은 무시된다.

html에 작성한 순서대로 box들이 배치됨(기본값)

 

 

2. relative

• relative은 static일 때를 기준으로 위치를 조정할 수 있게 한다.

• top, right, bottom, left 속성을 통해서 요소를 움직일 수 있는데

  static일 때를 기준으로 top은 위에서 얼마큼 떨어져 있는지,

  right는 오른쪽에서 얼마나 떨어져 있는지 , bottom은 아래에서 얼마나 떨어져 있는지,

  left는 왼쪽에서 얼마나 떨어져 있는지를 지정할 수 있다.

• 부모 태그가 있다면 _부모 태그에 대해서 상대적인 위치를 갖는다.

• relative는 원래 자신이 있었던 자리를 기억하고 그 자리를 기준으로 상대적으로 움직인다는 뜻이다.

기존에 두번째 초록색 상자가 위치했던 곳을 중심으로 상자의 위치가 변경된 것을 확인할 수 있다.

 

 

3. absolute

• absolute는  부모 태그의 position이 static이 아닌 경우에 부모 태그의 위치를 기준으로 top, right,bottom,left위치를 조정할 수 있다.

• 일반적으로 absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모 태그에 position: relative; 를 설정한다.

• 부모 태그의 position: static; 인 경우나 부모 태그가 없는 경우에는 body를 기준으로 위치를 조정한다.

• 사이즈는 content의 크기에 맞게 조정된다. (변경가능)

• left: 0, right: 0 을 주면 부모 크기의 width에 딱 맞게 된다. 

부모 태그인 section을 기준으로 위치가 변경된 것을 확인할 수 있다.

 

 

4. fixed

• fixed는 부모 태그에 영향을 받지 않고 화면의 시작부분을 기준으로 top, right, bottom, left위치를 조정할 수 있다.

• 또한 스크롤이 있어도 스크롤을 무시하고 화면에 고정적으로 위치한다.

• fixed도 absolute와 마찬가지로 사이즈가 content의 크기에 맞게 조정된다.

 

absolute와 달리 부모태그 기준이 아닌 화면의 시작부분을 기준으로 위치가 변경되고, 스크롤을 내려도 위치가 고정되어 있다.

 

5. sticky

• sticky는 relative처럼 동작하면서 relative 요소가 없는 경우에는 fixed처럼 동작하는 두 가지 효과를 모두 가질 수 있다.

• 처음 화면에서는 static값처럼 작용하다가 스크롤이 움직이면 fixed값과 같이 작용한다.

• sticky는 fixed와는 다르게 부모 박스의 height 범위 내에서만 fixed로 작용하며, 스크롤이 부모 박스를 벗어나면 static으로 작용한다.

• 부모 태그 중 어느 하나라도 overflow: hidden; 가 있으면 일반적인 static값으로 적용된다.

 

처음 화면에서는 static처럼 원래 위치에 있다가 스크롤이 움직이면 fixed값과 같이 화면에 고정된 상태로 있다.