TIL.position

position

position 속성
HTML 요소가 위치를 결정하는 방식을 설정한다.
top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다.

1. 정적 위치(static position) 지정 방식

2. 상대 위치(relative position) 지정 방식

3. 고정 위치(fixed position) 지정 방식

4. 절대 위치(absolute position) 지정 방식

---

정적 위치(static position) 지정 방식

HTML 요소의 위치를 결정하는 가장 기본적인 방식은 정적 위치 지정 방식이다.

position 속성값이 static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지않는다.

<style>
	div{position: static;}
</style>

---

상대 위치(relative position) 지정 방식

상대 위치 지정 방식은 해당 HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식이다.
요소를 일반적으로 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다.

<style>
	div.relative{ position: relative; left:30px; }
</style>

---

고정 위치(fixed position) 지정 방식

고정 위치 지정 방식은 뷰포트(viewport)를 기준으로 위치를 설정하는 방식이다.
즉, 웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치하게 된다.

<style>
	div.fixed{ position: fixed; top: 0; right: 0; }
    </style>

---

절대 위치(absolute position) 지정 방식

절대 위치 지정 방식은 고정 위치가 뷰포트를 기준으로 위치를 결정하는 것과 비슷하게 동작된다.
단지 뷰포트를 기준으로 하는 것이 아닌 위치가 설정된 조상요소를 기준으로 위치를 설정하게 된다.

하지만 위치가 설정된 조상요소를 가지지 않는다면, HTML 문서의 body요소를 기준으로 위치를 설정하게 된다.

<style>
    div.absolute { position: absolute; top: 50px; right: 0; }
</style>

---

CSS position 속성

• position : HTML 요소의 위치를 결정하는 방식을 설정
• top : 위치가 설정된 조상 요소의 위로부터의 여백을 설정한다.
• right : 위치가 설정된 조상 요소의 오른쪽으로부터의 여백을 설정한다.
• bottom : 위치가 설정된 조상 요소의 아래로부터의 여백을 설정한다.
• left : 위치가 설정된 조상 요소의 왼쪽으로부터의 여백을 설정한다.
• z-index : 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정한다.
• clip : 절대위치(absolute position) 지정 방식으로 위치한 요소를 자른다.
• cursor : 표시되는 마우스 커서의 모양을 설정한다.
• overflow : 내용(content)의 크기가 해당 요소의 박스(box)를 넘어갈 때 어떻게 처리할지를 설정한다.