CSS position

static, relative, sticky 속성값 부모박스안에서 위치변경이 일어나게 된다.

 

relative

relative는 부모박스안에서 위치 변경이 일어나며 원래 자신이 위치해있던 위치를 알고 있기 때문에 다른 요소들의 위치 변경이 일어나지 않는다.

 

absolute

absolute는 static속성이 아닌 부모 박스 안에서 위치 변경이 일어나며, 만약 부모요소중에 static이 아닌 것이 없다면 최상단 요소인 body에서 위치 변동이 일어난다.

absolute를 사용하면서 유의해야 될점으로는 주변에 있는 다른 요소들이 absolute로 된 요소의 위치를 알 수 없기 때문에 다른 요소들의 위치도 변동이 일어 난다는 것이다. 

 

fixed

fixed는 들어 있는 부모 박스와 관계 없이 현재 사용자가 보고 있는 브라우저 화면(뷰포트)를 기준으로 마치 화면에 붙은 것처럼 그 자리에 계속해서 위치해 있다.

fixed도 absolute속성값과 동일하게 주변에 있는 다른 요소들이 fixed된 요소의 위치를 알 수 없기 때문에 자동으로 위치 변동이 일어난다.

sticky

sticky는 부모박스안에서 위치변경이 일어나게 되며, top,left..등 위치를 지정해주지 않으면 작동하지 않는다.

작동은 포함하고 있는 부모요소까지만 붙어 있는 속성을 갖게 된다.

relative와 동일하게 자신의 위치를 지키고 있기 때문에 근접한 다른요소들에 대해서 위치 변동이 일어나지 않는다.

 

z-index

z-index는 오직 static을 제외한 position 속성값이 적용된 요소의 Z축 순서를 결정할 수 있으며, z-index 값이 더 큰 요소가 값이 작은 요소의 위를 덮어버리게 됩니다.

부모가 z-index를 높여 자식 앞으로 나올 수 없습니다. 자식은 z-index를 낮춰 부모 뒤로 가는 것은 가능합니다.

부모요소에 형제요소가 있는 경우에 만약 부모요소에게 z-index속성값을 주지 않고 자손요소에게만 z-index값을 주게 되는 경우 부모형제요소보다 z-index값을 가지게 된다면 자손이 제일 위에 올라갈 수 있다.