position의 종류 : static, relative, absolute, fixed
static : 모든 속성의 기본값, 움직이지 않는다.
relative : 현재 위치에서 ~ 만큼. 또는 부모 요소로써의 기준점으로 사용된다.
absolute : 상위 요소 기준으로 ~만큼.
fixed : 화면에 고정된다. (팝업, 검색창 고정 등에 사용)
relative, absolute의 관계
아래처럼 position:absolute를 사용하였지만,
상위 요소를 지정하지 않을 경우에는 <body> 태그를 기준으로 움직이게 된다.
position:absolute
left:10px
top:10px
/* absolute의 상위 요소 기준으로 ~만큼 이동한다. */이에 대한 해결방법은 당연하게도 기준으로 잡을 수 있는 부모 요소를 지정해주면 된다.
지정 방법은 기준으로 잡을 부모 요소에 position:relative를 부여하면 된다.
* 주로 absolute의 부모 요소에 relative를 부여하는 이유는 자식 요소의 기준점을 만들기 위함이다. *
'공부 > HTML, CSS' 카테고리의 다른 글
| [CSS] 가상요소 (0) | 2021.12.25 |
|---|---|
| [CSS] 폰트 적용 방법 3가지 (0) | 2021.12.25 |
| [HTML] audio, video, embed 태그 (0) | 2021.12.21 |
| [학원 과제] 관람 등급 화면 만들기 (0) | 2021.12.17 |
| [학원 과제] 구글 리트리버 검색 미리보기 만들기 (0) | 2021.12.17 |