Skip to content

Latest commit

 

History

History
58 lines (35 loc) · 2.29 KB

README.md

File metadata and controls

58 lines (35 loc) · 2.29 KB
Raw

position 속성에 대해서

들어가며

우리가 보는 웹 사이트는 평면 세계로 보이지만 실제로는 2차원과 3차원이 혼합된 상태이다. position 속성은 선택된 태그의 상태를 2차원 또는 3차원으로 지정해준다. position 속성값에는 static, fixed, relative, absolute가 있다.

속성값의 특징

각 속성값의 특징은 다음 세 가지 조건으로 확인할 수 있다.

  • 부모 자식 간에 발생하는 마진 병합 현상의 유무
  • top, right, bottom, left 속성 적용 유무
  • 부모가 높이를 갖고 있지 않을 때 자식의 높이가 부모의 높이에 영향을 주는지 유무

2차원 특징을 갖는 position 속성값은 부모 자식 간에 발생하는 마진 병합 현상이 일어나고, top, right, bottom, left 속성을 사용할 수 없으며, 자식의 높이가 부모의 높이에 영향을 미친다. 반면 3차원 특징을 갖는 position 속성값은 부모 자식 간에 발생하는 마진 병합 현상이 일어나지 않으며, top, right, bottom, left 속성을 사용할 수 있으며 자식의 높이가 부모의 높이에 영향을 줄 수 없다.

static 속성 값

2차원 특징을 갖는다. 모든 html 태그는 기본적으로 position: static 상태이다.

  • 부모 자식 간 마진 병합 현상 (O)
  • top, right, bottom, left 속성 적용 (X)
  • 부모가 높이를 갖고 있지 않을 경우, 자식의 높이가 부모에 영향 (O)

fixed 속성 값

3차원의 특징을 갖는다.

  • 부모 자식 간 마진 병합 현상 (X)
  • top, right, bottom, left 속성 적용 (O)
  • 부모가 높이를 갖고 있지 않을 경우, 자식의 높이가 부모에 영향 (X)

relative 속성 값

2차원과 3차원의 특징을 모두 갖는다.

  • 부모 자식 간 마진 병합 현상 (O)
  • top, right, bottom, left 속성 적용 (O)
  • 부모가 높이를 갖고 있지 않을 경우, 자식의 높이가 부모에 영향 (O)

absolute 속성 값

3차원의 특징을 갖는다.

  • 부모 자식 간 마진 병합 현상 (X)
  • top, right, bottom, left 속성 적용 (O), 단 부모의 position 상태에 따라 좌표 기준점이 달라진다.
  • 부모가 높이를 갖고 있지 않을 경우, 자식의 높이가 부모에 영향 (X)