position

 

1. static

 - position의 기본 속성으로 모든 요소가 기본적으로 static형태다. 

2. relative

relative는 해당 스타일이 적용된 요소가 본인 위치에서 움직이는 속성이다.

위에서 빨간 박스를 움직이기 위해 position의 relative속성을 지정하고 위에서 100px, 왼쪽에서 100px만큼의 거리를 두겠다고 지정하였다. 그 결과 기존위치에서 다른 곳에 빨간 박스가 위치하게 되었다.

 

3.absolute

absolute는 상위 노드(부모노드) 중 postition이 relative가 있는 노드를 찾아 기준으로 삼아 그 안에서 움직인다.

빨간 박스를 파란색 박스안에서 움직이기 위해 파란 박스에 position을 relative로 설정하여 기준으로 삼고 빨간 박스에 absolute를 지정하였다. 그로 인해 빨간 박스는 relative속성을 가진 파란박스를 찾아 그 안에서 움직일 수 있게 되었다. 오른쪽에 여백없이 위치시키기 위해 right의 값을 0으로 설정하여 빨간 박스는 파란박스의 내 오른쪽에 붙게 되었다. 여백을 주려면 0이 아닌 원하는 거리만큼의 값을 설정해주면 된다.

 

4.fixed

fixed를 사용하면 스타일이 적용된 요소가 특정 위치에 고정되어 스크롤을 내려 움직이더라도 항상 같은 위치에서 보이게 된다.

빨간 박스에 fixed로 설정되어 스크롤을 움직여 하얀선의 위치가 바뀌더라도 빨간박스의 위치는 항상 그대로 있게 된다. 주로 메뉴를 고정시키는 용도로 사용된다.

 

5.sticky

 - fiexd와 같이 특정 위치에 고정되어 스크롤을 내려도 같은 위치에 보이게 된다. 다만 fiexd와의 차이는 sticky가 적용된 요소가 있는 영역을 벗어나게 되면 따라 움직이지 않게 된다. 

sticky를 적용하게 되면 top, bottom,left,right 중 하나라도 적용되어야 하면 적용되지 않으면 특정 위치에 고정되는 특징이 적용되지 않는다.