position과 좌표 레이아웃 만들기

좌표속성

.box {
  top : 20px;
  left : 30%;
}

top, left, bottom, right 속성을 이용하면 요소의 상하좌우로 이동할 수 있다. 하지만 이대로만은 쓸 수 없고 좌표속성을 이용하려면 position 속성이 필요하다. 즉, 여기가 기준점이다,라고 표기한다고 생각하자.

position 속성 4가지

.box {
  position : static; /* 기준이 엄서요 (좌표적용 불가) */
  position : relative; /* 기준이 내 원래 위치요 */
  position : absolute; /* 기준이 내 부모요 */
  position : fixed; /* 기준이 브라우저 창이요 (viewport) */
}

원하는 기준을 선택하자. 그러면 좌표속성으로 좌표 값을 주어 이동할 수 있다. 단, position: absolute는 부모가 position: relative를 가지고 있는 것을 기준으로 이동한다.

position: absolute를 적용한 가운데 정렬

.button {
  position : absolute; 
  left : 0;
  right : 0; 
  margin-left : auto;
  margin-right : auto;
  width : 적절히
}

적어도 여러개의 속성이 필요하기 때문에 번거롭긴 하다.