CSS속성_position

요소의 레이아웃을 설정하는 대표적인 속성은 position 속성입니다.

position은 요소의 위치를 원하는 곳으로 이동할 수 있게 합니다.

position을 사용하기 위해서는 요소를 이동시키기 위한 좌표 속성인 offset에 대해서도 알아야 합니다.

position과 offset 속성을 잘 활용하면 더 다양하고 화려한 레이아웃을 구현할 수 있습니다.

 

position 속성

요소의 위치를 정하는 방법을 지정하는 속성입니다.

 

속성값(static)

1. static : 다른 태그와의 관계에 의해 자동으로 배치 되며 위치를 임의로 설정할 수 없습니다.

child2에만 offset 값을 지정하였지만 "static속성"은 offset 값이 적용되지않아 child1과 동일하게 보입니다.

2. absolute : 부모요소의 위치를 기준으로 offset에 따라 배치된다.(절대 위치)

    - 부모가 position 값(static 제외)을 가지면 offset 값의 시작점이 된다.

    - 부모의 position 값이 static인 경우 조상의 position 값이 static이 아닐 때까지 거슬러 올라가 기준으로 삼는다.

    - Normal-flow의 흐름에서 벗어난다.

절대위치를 지정하여 문서 흐름을 벗어나 정해진 위치에 보여집니다.

3. fixed : 뷰포트(브라우저의 창)를 기준으로 offset에 따라 배치된다. (고정 위치)

    - 즉, 화면 스크롤에 관계 없이 항상 화면의 정해진 위치에 정보가 나타난다.

    - 부모의 위치에 영향을 받지 않는다.

스크롤이나 부모의 위치와 상관 없이 항상 문서 좌측 최상단을 기준으로 하여 위치를 조정한다.

4. relative : 자신이 원래 있어야할 위치를 기준으로 offset에 따라 배치된다. (상대 위치)

    - 부모의 position 속성에 영향을 받지 않는다.

    - Normal-flow의 흐름에 따른다.

    - 주변 요소에 영향을 주지 않으면서 offset값으로 이동한다.

원래 문서흐름에 맞는 위치를 기준으로 좌표를 지정합니다.

 

Normal-flow 란?

일반적인 상황에서 각의 요소들의 성질에 따라 배치 되는 순서(흐름)를 뜻합니다. 예를 들면, block 레벨 요소들은 상하로 배치되고, inline 레벨 요소들은 좌우로 배치되는 것을 말합니다.

 

속성값(absolute, fixed)의 경우, 인라인 요소에다 선언하게 되는 경우 display의 값이 block으로 변경됩니다.

---

offset 속성

속성값 : top / left / bottom / right

 

offset의 %단위 사용 이전에 padding과 margin에서 % 값을 적용할 때, 상하좌우 방향에 관계없이 가로 사이즈를 기준으로 %값을 계산된다고 배웠습니다. 그러나 offset은 top, bottom (상하) 는 기준이 되는 요소의 height 값 left, right (좌우) 는 width값에 대하여 계산되어집니다.