[CSS] Position : 레이아웃을 독립적으로 배치하는 방법

Position

 

position은 페이지의 어떤 레이아웃을 특정 위치에 배치하기 위해 사용하는 CSS 속성이다.

핵심적으로 기억해야 할 내용은 언제 이 속성을 사용하는지이다.

(출처 : https://velog.io/@yeonbot/CSS-position-absolute-fixed-%EC%B0%A8%EC%9D%B4)

 

1. position:fixed는

• 스크롤이 내려가더라도 떠있는 header
• modal
• 오른쪽 하단에 항상 떠있는 floating 버튼

2. position: absolute는

• 특정 엘리먼트 내에서 다른 엘리먼트와 관계 없이 움직여야 하는 경우

 

position 프로퍼티는 요소의 위치를 정의한다.

프로퍼티 값으로 fixed, absolute, relative, static이 있으며

보통 부모요소에 relative 값을 주고 자식요소에 absolute 값을 주어 사용한다.

또한, top, bottom, right, left라는 "좌표 프로퍼티"와 함께 사용한다.

position 속성을 사용하기 위해서 꼭 잊지 말아야 할 것은 바로 무엇을 기준으로 위치가 조정되는지이다.

 

2.1 static

position 프로퍼티를 선언하지 않으면, default 값은 static(정적, 고정된)이다.

그래서 보통 요소가 배치되는 위치는 부모요소가 없다면 왼쪽에서 오른쪽, 위에서 아래로 배치되고

부모요소가 있다면 부모요소의 위치를 기준으로 위 규칙에 의해 배치된다.

 

2.2 relative

static 상태일 때를 기준으로 좌표 프로퍼티를 사용하여 위치를 이동시킨다.

2.3 absolute

static 속성을 갖는 요소를 제외하고 자신과 가장 가까운 조상요소의 위치를 기준으로 좌표 프로퍼티 만큼 이동한다.

모든 조상요소가 static이라면 body를 기준으로 삼는다.

이러한 특성때문에 absolute 속성을 사용하려면 기준으로 잡을 조상요소에  position: relative; 프로퍼티를 지정해주어야 한다.

보통은 해당요소를 div로 감싸고 div태그에 프로퍼티를 지정한다.

 

이 때, absolute 선언 시 block요소의 경우, width는 inline요소와 같이 content에 맞게 변화하므로 적절한 width를 지정해주어야 한다.

2.4 fixed

fixed 속성은 브라우저의 뷰포트를 기준으로 좌표 프로퍼티를 사용하여 위치를 이동, 고정시킨다.

따라서, 스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.

fixed도 마찬가지로 block요소의 경우 선언 시 width는 inline요소와 같이 content에 맞게 변화하므로 적절한 width를 지정해주어야 한다.

 

 

3. 심화학습 할 내용 about CS

- [CSS] position 을 적용하면 Layout 단계에서 어떤 일이 일어날까 ? : https://velog.io/@yeonbot/CSS-position-absolute-fixed-%EC%B0%A8%EC%9D%B4

- [성능] Reflow 원인과 마크업 최적화 Tip : https://daumui.tistory.com/m/12

- 브라우저는 어떻게 동작하는가 ? : https://d2.naver.com/helloworld/59361