position 은 레이아웃을 배치하거나, 객체를 원하는 곳에 위치시킬 때 사용하는 속성이다.
상속되지 않으며, 상하좌우로 위치를 설정할 수 있다.
1. [ position: static; ] - 기본 속성
- 기본 상태는 static상태이다. (일반적인 태그)
- 위치를 지정하지 않을 때 사용한다.
- css에서 중요한 개념이기 때문에 꼼꼼하게 복습 해야하는 속성 중 하나이다.
(flex, block, float, grid상태일때도 사용하는 중요한 속성)
- absolute와 fixed는 딱 한가지 특징을 제외하고 전부 동일한 특징을 가지고 있다.
2. [ position: relative ]
- 특정 엘리먼트에 절대위치 공간을 설정하고 싶을 때 사용(상위엘리먼트 중 마음대로 부모를 골라서 사용할 수 있다.)
- 위치를 계산할 때 static의 원래 위치부터 계산한다.
- 위치를 이동시켜주는 - left, right, top, bottom(위치속성)이 적용되어야 원래의 위치에서 이동할 수 있다.
ㄴ css에서의 예시) .(이름) {position: relative;}
.(이름의 하위 엘리먼트) {left: 50px; right: 60px;}
3. [ position: absolute ]
- 원래 위치와 상관없이 위치를 지정한다. 단, 가장 가까운 상위 엘리먼트를 기준으로 위치가 설정된다.
- 절대위치로 레이아웃 구성이 가능하지만 객체가 스크롤을 따라다니지 않는다.
- absolute가 처음 적용되었을때 위치속성을 사용하기 전까지 static상태일때 위치를 유지한다.
- 상위엘리먼트에 relative가 적용되기 전까지 body가 부모엘리먼트 역할을 한다.
- absolute가 적용된 태그는 부모를 벗어난다.
- absolute를 적용하게 되면 width: auto;일때 0값으로 작동한다.
(너비를 100%로 사용하고 싶으면 width: 100%를 적용하면 된다.)
4. [ position: fixed ]
- 원래 위치와 상관없이 위치를 지정할 수 있다. 그러나 상위 엘리먼트에 영향을 받지 않기에 화면이 바뀌어도 고정된 위치를 설정할 수 있다.
- 절대위치로 레이아웃 구성이 가능하지만 객체가 스크롤을 따라다닌다.
[위치속성]
- left, right, top, bottom
- relative, absolute, fixed 상태에서만 사용 가능하다.
- left, right -> X축 이동.
- top, bottom -> Y축 이동.
[부모 역할]
- 너비, 높이(크기) 상속
- 가둬주는 역할 (위치 속성 사용 시 공간 제공(기준점이 되어준다.))