position 속성
CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용
position: static
position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용
position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치
이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며, 따라서 top, left, bottom, right 속성값은 position 속성이 static일 때는 무시
position: relative
position 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치할 수 있다
요소를 원래 위치를 기준으로 상대적(relative)으로 배치
요소의 위치 지정은 top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있다.
즉 부모요소에 써서 기준이 되게 해준다.
position: absolute
절대적인 위치를 설정한다.
이 때, 기준은 static이 아닌 relative를 설정해둔 상위 요소 에서 찾는다. 만약에 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 요소가 배치 기준이 된다.
요소를 정 중앙으로 오게 하는 가장 많이 쓰이는 기법
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);transform: translate(-50%, -50%); 변형을 시켜주는 속성으로서
top:50%, left: 50% 라고 설정을 하면
top에서 50% left: 50% 를 기준으로 요소가 시작되어 배치 되기 때문에
요소가 가진 크기만큼 다시 x축으로 -50%, y축으로 -50%을 가게 되면 정확히 정중앙으로 간다.
position: fixed
고정값을 말한다.
마우스를 스크롤을 하거나 페이지 내에서 이동을 하더라도 fixed를 사용한 요소는 설정한 자리에 고정이 된다. 이 때, 고정값의 기준은 브라우저가 된다는 것이, absolute와 가장 차이 되는 점이다.
