css - position

개발자들은 css의 position property를 이용하여
html상의 코드가 짜여진 순서와 상관없이 원하는 요소를 웹상에서 원하는 위치에 보여지게 만들 수 있다.

position 프로퍼티에는 네가지의 값이 있다.
1. position: static;
2. position: relative;
3. position: fixed;
4. position: absolute;

1. position: static;
   default값이다. 따로 위치를 정하지 않는다.

2. position: relative;
   이 자체만으로는 아무런 의미가 없지만, top right bottom left를 설정해서 원하는 위치로 이동시킬 수 있다. (top right bottom left등의 프러퍼티의 값을 주지 않았을 경우, 아무런 변화가 없다.)
   예를들어, 아래의 코드로 해당 요소를 왼쪽에서 30px 떨어진 위치로 이동시킬 수 있다.

   position: relative;
   left: 30px;

3. position: fixed;
   페이지를 스크롤링하더라도 항상 그 위치에 머무르게(고정) 만들기 위해 사용된다.
   relative와 마찬가지로 위치를 설정하는 top right left bottom등의 프러퍼티와 값이 필요하다.
   absolute는 relative를 가진 부모가 필요하지만 fixed는 필요없다.

4. position: absolute;
   해당요소의 부모요소에 대해 절대적으로 움직인다. 부모요소가 없을경우 body에 대해 절대적으로 움직인다.
   또한, 해당요소가 원래 block-element의 성질을 가지고 있었더라도 (가로크기가 부모 너비만큼 전부 차지함. div,p 등) position:absolute;를 적용시키면 linline-element처럼 내용의 크기만큼만의 너비를 차지한다.
   예를들어, 아래의 코드는 해당요소의 부모요소를 기준으로 위에서 80px, 오른쪽에서 0px 떨어진 곳으로 위치한다.

   position: absolute;
   top: 80px;
   right: 0;