속성 (properties) - 3편

position (요소 위치의 기준)

div {
  top: 0;
  bottom: 10px;
  left: 20px;
  right: 30px;
  position: absolute;
  position: relative;
  position: fixed;
}

• top, bottom, left, right : 요소의 각 방향별 거리 지정

• elative : 요소 자신을 기준

• absolute : 위치 상 부모요소 기준

• fixed : 뷰포트 기준

relative absolute fixed

1. relative

div {
  position: relative;
  /* 아래처럼 이동시키는건 권장되지 않음 */
  top: 10px;
  right: 30px;
}

• 자기 자신을 기준으로 삼아 자신의 위치를 변경 가능

• relative로 자신의 위치 변경 시 기존 위치가 빈 공간으로 남아있게 되어 추천하지 않음

2. absolute

div {
  position: relative;
}

div {
  position: absolute;
  bottom: 20px;
  left: 15px;
}

• relative가 부여된 가장 가까운 상위 요소를 기준으로 삼아 자신의 위치를 변경

• 만약 relative 요소가 없다면 뷰포트가 기준이 됨

• absolute 요소는 display 속성이 block 으로 바뀜

3. fixed

div {
  position: fixed;
  top: 0px;
}

• 뷰포트 기준으로 위치를 고정시켜 스크롤을 해도 움직이지 않음

• fixed 요소는 display 속성이 block 으로 바뀜