배치 관련 스타일 - position

position은 요소의 배치와 관련된 스타일입니다.

position을 이용하면 요소를  웹 페이지의 특정한 위치에 고정시키거나, 화면 상의 특정 위치에 고정시킬 수 있습니다.

1. :relative
- postion을 사용하기 위해서는 기준이 될 요소가 필요합니다.

position: relative는 해당 속성을 가진 요소를 기준 요소로 만들어주며, 내부의 자식 / 후손 요소들은 상대적인 위치를 가질 수 있게 됩니다. 

 

2) :absolute
- 기본 요소의 배치 순서를 무시하고 지정된 절대 위치에 요소를 배치

 

absolute는 기본 요소의 배치 순서를 무시하고 지정된 절대 위치에 요소를 배치하는 속성입니다.

 

웹페이지의 특정한 좌표에 요소를 고정시킨다고 생각하시면 됩니다.

#div1{
    position:absolute;
    top: 30px;
    left: 20px;
}

위쪽에서 30px, 왼쪽에서 20px 떨어진 위치에 id = div1을 가진 요소를 배치합니다.

---

* 참고 : html의 좌표는 수학의 함수와 비슷하면서도 다릅니다

요소의 좌표를 (x,y)라고 할 때,  부모요소의 좌측 상단 모서리의 좌표가 (0,0)입니다.

그리고 오른쪽으로 갈 수록 x축 값이 커지고, 아래로 갈수록 y축 값이 커집니다.

---

absolute를 사용하기 전 몇 가지 유의사항이 있습니다.

1) absolute는 float를 무시하고 우선 적용됩니다.
2) absolute 요소끼리 겹치게 된 경우 나중에 해석되는 HTML 요소가 위에 겹치게 됩니다.

3. :fixed
- 항상 고정된 위치에 요소를 배치

 

fixed는 현재 보여지는 화면의 특정한 위치에 요소를 고정시키는 속성입니다.

 

absolute 속성은 웹 페이지 전체에서 특정한 위치에 요소를 고정시킵니다. 그래서 스크롤을 내려 해당 부분을 벗어나면 요소가 보이지 않습니다.

 

그러나 fixed 속성을 가진 요소는 스크롤과 상관 없이 화면 상의 특정한 위치에 항상 고정되어 있습니다.

'맨 위로'와 같은 버튼을 구현할 때 많이 사용됩니다.

#box2{
    position:fixed;
    bottom: 10px;
    right: 5px;
}

위와 같이 작성하면 부모 요소 내에서, 아래에서 10px, 오른쪽에서 5px 떨어진 위치에 요소가 배치됩니다.

4. :sticker
- 요소가 보여지는 화면을 벗어났을 때 스티커처럼 화면에 붙여서 고정된 위치를 가지게 만듦 (fixed의 응용 버전)

 

sticker는 스크롤을 내리는 등 요소가 화면에서 벗어났을 때, 해당 요소를 화면의 특정한 위치에 고정시키는 속성입니다.

 

5. z-index
- position 속성에 의해서 겹쳐진 요소들의 순서를 지정하는 속성 (= z축 조정)

 

z-index는 요소의 z축 위치를 지정하는 속성입니다. z-index 수치가 클 수록 앞쪽, 즉 높게 배치됩니다.

 

 

아래는 position을 사용한 예시입니다.

 

 

See the Pen Untitled by cmp (@cmpset) on CodePen.

빨강색 아이템은 부모 요소의 상단에서 10px, 왼쪽에서 50px 떨어진 위치에 배치되었습니다.

노랑색 아이템은 아래쪽에서 -30px, 왼쪽에서 50px 떨어진 위치에 배치되었습니다.

검정색 아이템은 fixed 속성이 적용된 예시입니다. 화면 크기, 스크롤에 상관 없이 항상 저 위치에 배치됩니다.

 

녹색 아이템은 z-index를 사용한 예시입니다.

녹색 아이템 아래에는 보라색 아이템이 있습니다. 원래대로라면 두 아이템 중 마지막에 작성한 보라색 아이템이 앞쪽에 배치되어 우리 눈에 보여야 합니다. 그러나 z-index를 이용해 녹색 아이템이 더 앞쪽에 배치되도록 만들었습니다.

 

 

한편 상자 가운데에 파란색 요소가 있습니다. 이는 position과 margin: auto를 함께 사용한 예시입니다.

 

방법은 간단한데, 먼저 정중앙에 배치하고 싶은 요소에 position: absolute 속성을 부유합니다.

그 후 해당 요소의 top, bottom, left, right 속성의 값을 전부 0으로 만듭니다

그러고 나서 margin-auto 속성을 부여하면 해당 요소가 화면 상의 정 중앙에 위치하게 됩니다.

 

그러면 요소가 화면 상의 중앙에 배치됩니다.