9.5 포지션(Position)
요소(element)의 위치를 결정하는 속성.
| 속성 값 | 설명 |
|---|---|
static |
태그와의 관계에 의해 결정되는 요소의 기본적인 위치. 포지션 속성의 default 값이며 offset 값을 무시한다. |
relative |
Static위치를 기준으로 offset 값만큼 이동. |
absolute |
- Positioned* 된 조상(ancestor) 요소를 기준으로 offset 값만큼 이동. - Positioned 된 조상이 없으면 <body> 태그를 기준으로 offset 값만큼 이동한다. - absolute 값이 적용된 자손(descendant) 요소는 조상 요소에서 벗어난 것처럼 된다***. |
fixed |
화면을 기준으로 offset 값만큼 이동해서 위치한 뒤 스크롤의 이동에 상관없이 그 위치에 고정(fixed)되어 있는다. |
* position의 속성 값이 static이 아닌 요소.
** 강의에서는 웹페이지의 왼쪽 위의 모서리를 기준으로 offset값만큼 이동한다고 먼저 설명했지만 positioned 된 조상을 기준으로 움직이는 것이 핵심적인 내용이고 조건을 만족하는 조상이 없는 경우 <body> 태그를 기준으로 offset값만큼 이동하는 것으로 보인다.
*** 강의에서는 조상-자손 관계가 끊어진다고 표현했으나 조상 요소의 박스 부피가 자식 요소를 포함하지 않는 것 처럼 줄어들고 자식 요소의 width가 100%가 아니게 되는 것 외의 속성 값들은 대부분 상속받는 것으로 보인다.
<style>
선택자{
position: 속성 값
/* offset 값 작성**** */
left: 100px;
top: 100px;
}
</style>
**** left와 right 값이 동시에 적혀있으면 left를 top과 bottom값이 동시에 적혀있으면 top을 우선적으로 반영한다.
참고
- 생활코딩 CSS - 포지션 강의
- CSS 포지션(position) by ZeroCho
- [CSS] 포지션(position) 속성강좌 by 정직한 블로그
'공부를 합니다 > 웹 (Web)' 카테고리의 다른 글
| 생활코딩 CSS_9.7 미디어 쿼리(Media Query) (0) | 2020.03.16 |
|---|---|
| 생활코딩 CSS_9.6 Flex (0) | 2020.03.05 |
| 생활코딩 CSS_9.4 마진 겹침 현상(Margin-collapsing) (0) | 2020.03.05 |
| 생활코딩 CSS_9.1-9.3 박스모델 (Box model) (0) | 2020.03.05 |
| 생활코딩 CSS_09 레이아웃 (0) | 2020.03.02 |