코딩토닉

Position

HTML에서는 static 포지션이 기본값으로 되어있습니다.

static 포지션은 HTML이 작성된 순서대로 나열이 되어 있는 형태를 의미하며,

포지션의 종류에는 크게 static,relative,absolute,fixed 4개의 값이 있습니다.

relative

relatives는 별도의 위치값을 지정하지 않으면 static과 다르지 않은 결과를 보여줍니다.

해당 요소가 기본적으로 표시된 위치에서 top,rigth,bottom,left를 지정하면 표시된 위치에서 좌표가 변경됩니다.

해당 요소가 붕 떠서 독립적으로 자유롭게 이동하는 것처럼 보입니다.

absolute

absolute는 기본적으로 표시된 위치에서 이동하는 것이 아니라, 가장 가까운 부모 엘리먼트를 기준으로 위치가 지정된다고 보면된다. 일반적으로 부모는 relatives 속성값을 부여하며, 기준으로 삼을만한 부모 엘리먼트가 없다면 document body를 기준을로 잡습니다. 부모 중에 position이 static으로 지정되지 않은 엘리먼트를 기준으로 지정된다고 보면 됩니다.

absolute 속성을 부여한 요소는 가운데 정렬이 풀리기 때문에 가운데 정렬을 하고 싶다면 아래와 같은 속성을 추가해주면 됩니다.

.button {
  position : absolute; 
  width : 자신이 원하는 크기
  left : 0;
  right : 0; 
  margin : 0 auto;
}

fixed

fixed는 브라우저기준으로 위치가 지정됩니다. 페이지가 스크롤이 되더라도 항상 그 위치에 고정이 되어있으며,

스크롤을 하더라도 어느 한 위치에 고정을 하고 싶을때 사용합니다.