Position

📌 좌표속성

top, left, bottom, right 등의 속성을 사용하면 요소의 상하좌우 위치를 변경 가능하다

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

📌 position

좌표속성을 적용할 기준점 지정해주는 역할을 하는 속성이다.

📌 position 속성 종류

static 기준이 없음 (좌표적용 불가)
relative 내 원래 위치를 기준으로 함
absolute relative를 가지고 있는 부모를 기준으로 함
fixed 브라우저 창(viewport)을 기준으로 함

position : absolute를 적용한 요소 가운데 정렬하기

적어도 5가지 속성 있어야 함
position : absolute;
left : 0;
right : 0;
margin-left : auto;
margin-right : auto;
width : 적당히