Position
position은 태그들의 위치를 결정하는 CSS 속성이다.
레이아웃을 배치하거나 객체를 위치시킬 때 사용한다.
Position의 속성
- static (default): 위치를 지정하지 않을 때 사용한다.
- relative: 위치를 계산할 때 static의 원래 위치부터 계산한다.
- absolute: 원래 위치와 상관 없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정된다.
position: static 속성을 가지고 있지 않은 조상을 기준으로 움직인다. 만약 조상 중에 position이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 된다. - fixed: 원래 위치와 상관없이 위치를 지정할 수 있다. 상위 요소에 영향을 받지 않아 화면이 바뀌더라도 고정된 위치를 설정할 수 있다. 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.
1. Static
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
모든 태그들은 기본값이 position:static 상태이다. 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.
2. Relative
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
relative는 static을 기준으로 이동한다. 원래 방향의 반대로 이동하고 싶으면 - (음수) 값을 주면 된다.
3. Absolute
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
#absolute는 조상 태그 중 position: relative, absolute, fixed인 태그가 없기 때문에 가장 위의 태그(body)를 기준으로 움직인다. 반면, #child는 조상 태그인 #parent가 position: relative이기 때문에 #parent를 기준으로 움직인다.
4. Fixed
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
position이 fixed로 설정되면 요소들이 항상 특정 위치에 고정되며 스크롤을 움직여도 그 자리에 계속 있는다.